<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/input.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=forms.html>← 4.10 Forms</a> — <a href=index.html>Table of Contents</a> — <a href=form-elements.html>4.10.6 The button element →</a></nav><ol class=toc><li><ol><li><ol><li><a href=input.html#the-input-element><span class=secno>4.10.5</span> The <code>input</code> element</a><ol><li><a href=input.html#states-of-the-type-attribute><span class=secno>4.10.5.1</span> States of the <code>type</code> attribute</a><ol><li><a href="input.html#hidden-state-(type=hidden)"><span class=secno>4.10.5.1.1</span> Hidden state (<code>type=hidden</code>)</a><li><a href="input.html#text-(type=text)-state-and-search-state-(type=search)"><span class=secno>4.10.5.1.2</span> Text (<code>type=text</code>) state and Search state (<code>type=search</code>)</a><li><a href="input.html#telephone-state-(type=tel)"><span class=secno>4.10.5.1.3</span> Telephone state (<code>type=tel</code>)</a><li><a href="input.html#url-state-(type=url)"><span class=secno>4.10.5.1.4</span> URL state (<code>type=url</code>)</a><li><a href="input.html#email-state-(type=email)"><span class=secno>4.10.5.1.5</span> Email state (<code>type=email</code>)</a><li><a href="input.html#password-state-(type=password)"><span class=secno>4.10.5.1.6</span> Password state (<code>type=password</code>)</a><li><a href="input.html#date-state-(type=date)"><span class=secno>4.10.5.1.7</span> Date state (<code>type=date</code>)</a><li><a href="input.html#month-state-(type=month)"><span class=secno>4.10.5.1.8</span> Month state (<code>type=month</code>)</a><li><a href="input.html#week-state-(type=week)"><span class=secno>4.10.5.1.9</span> Week state (<code>type=week</code>)</a><li><a href="input.html#time-state-(type=time)"><span class=secno>4.10.5.1.10</span> Time state (<code>type=time</code>)</a><li><a href="input.html#local-date-and-time-state-(type=datetime-local)"><span class=secno>4.10.5.1.11</span> Local Date and Time state (<code>type=datetime-local</code>)</a><li><a href="input.html#number-state-(type=number)"><span class=secno>4.10.5.1.12</span> Number state (<code>type=number</code>)</a><li><a href="input.html#range-state-(type=range)"><span class=secno>4.10.5.1.13</span> Range state (<code>type=range</code>)</a><li><a href="input.html#color-state-(type=color)"><span class=secno>4.10.5.1.14</span> Color state (<code>type=color</code>)</a><li><a href="input.html#checkbox-state-(type=checkbox)"><span class=secno>4.10.5.1.15</span> Checkbox state (<code>type=checkbox</code>)</a><li><a href="input.html#radio-button-state-(type=radio)"><span class=secno>4.10.5.1.16</span> Radio Button state (<code>type=radio</code>)</a><li><a href="input.html#file-upload-state-(type=file)"><span class=secno>4.10.5.1.17</span> File Upload state (<code>type=file</code>)</a><li><a href="input.html#submit-button-state-(type=submit)"><span class=secno>4.10.5.1.18</span> Submit Button state (<code>type=submit</code>)</a><li><a href="input.html#image-button-state-(type=image)"><span class=secno>4.10.5.1.19</span> Image Button state (<code>type=image</code>)</a><li><a href="input.html#reset-button-state-(type=reset)"><span class=secno>4.10.5.1.20</span> Reset Button state (<code>type=reset</code>)</a><li><a href="input.html#button-state-(type=button)"><span class=secno>4.10.5.1.21</span> Button state (<code>type=button</code>)</a></ol><li><a href=input.html#common-input-element-attributes><span class=secno>4.10.5.2</span> Common <code>input</code> element attributes</a><ol><li><a href=input.html#the-maxlength-and-minlength-attributes><span class=secno>4.10.5.2.1</span> The <code>maxlength</code> and <code>minlength</code> attributes</a><li><a href=input.html#the-size-attribute><span class=secno>4.10.5.2.2</span> The <code>size</code> attribute</a><li><a href=input.html#the-readonly-attribute><span class=secno>4.10.5.2.3</span> The <code>readonly</code> attribute</a><li><a href=input.html#the-required-attribute><span class=secno>4.10.5.2.4</span> The <code>required</code> attribute</a><li><a href=input.html#the-multiple-attribute><span class=secno>4.10.5.2.5</span> The <code>multiple</code> attribute</a><li><a href=input.html#the-pattern-attribute><span class=secno>4.10.5.2.6</span> The <code>pattern</code> attribute</a><li><a href=input.html#the-min-and-max-attributes><span class=secno>4.10.5.2.7</span> The <code>min</code> and <code>max</code> attributes</a><li><a href=input.html#the-step-attribute><span class=secno>4.10.5.2.8</span> The <code>step</code> attribute</a><li><a href=input.html#the-list-attribute><span class=secno>4.10.5.2.9</span> The <code>list</code> attribute</a><li><a href=input.html#the-placeholder-attribute><span class=secno>4.10.5.2.10</span> The <code>placeholder</code> attribute</a></ol><li><a href=input.html#common-input-element-apis><span class=secno>4.10.5.3</span> Common <code>input</code> element APIs</a></ol></ol></ol></ol><h4 id=the-input-element><span class=secno>4.10.5</span> The <dfn data-dfn-type=element><code>input</code></dfn> element<a href=#the-input-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>1+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input</a></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-input-element:concept-element-categories>Categories</a>:<dd><a id=the-input-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-input-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd>If the <code id=the-input-element:attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)">Hidden</a> state: <a id=the-input-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd>If the <code id=the-input-element:attr-input-type-2><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-2">Hidden</a> state: <a href=forms.html#category-listed id=the-input-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-input-element:category-label>labelable</a>, <a href=forms.html#category-submit id=the-input-element:category-submit>submittable</a>, <a href=forms.html#category-reset id=the-input-element:category-reset>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-input-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-input-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd>If the <code id=the-input-element:attr-input-type-3><a href=#attr-input-type>type</a></code> attribute is in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-3">Hidden</a> state: <a href=forms.html#category-listed id=the-input-element:category-listed-2>Listed</a>, <a href=forms.html#category-submit id=the-input-element:category-submit-2>submittable</a>, <a href=forms.html#category-reset id=the-input-element:category-reset-2>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-input-element:category-autocapitalize-2>autocapitalize-and-autocorrect inheriting</a> <a id=the-input-element:form-associated-element-2 href=forms.html#form-associated-element>form-associated element</a>.<dd>If the <code id=the-input-element:attr-input-type-4><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-4">Hidden</a> state: <a id=the-input-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-input-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-input-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-input-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-input-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-input-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-input-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-input-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-input-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-input-element:attr-input-accept><a href=#attr-input-accept>accept</a></code> —  Hint for expected file type in <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)">file upload controls</a>
     <dd><code id=the-input-element:attr-input-alpha><a href=#attr-input-alpha>alpha</a></code> —  Allow the color's alpha component to be set
     <dd><code id=the-input-element:attr-input-alt><a href=#attr-input-alt>alt</a></code> —  Replacement text for use when images are not available
     <dd><code id=the-input-element:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> —  Hint for form autofill feature
     <dd><code id=the-input-element:attr-input-checked><a href=#attr-input-checked>checked</a></code> —  Whether the control is checked
     <dd><code id=the-input-element:attr-input-colorspace><a href=#attr-input-colorspace>colorspace</a></code> —  The color space of the serialized color
     <dd><code id=the-input-element:attr-fe-dirname><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> —  Name of form control to use for sending the element's <a href=dom.html#the-directionality id=the-input-element:the-directionality>directionality</a> in <a id=the-input-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-input-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-input-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-input-element:attr-fs-formaction><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code> —  <a id=the-input-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> to use for <a id=the-input-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fs-formenctype><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code> —  <span>Entry list</span> encoding type to use for <a id=the-input-element:form-submission-2-3 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fs-formmethod><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code> —  Variant to use for <a id=the-input-element:form-submission-2-4 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fs-formnovalidate><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code> —  Bypass form control validation for <a id=the-input-element:form-submission-2-5 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fs-formtarget><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> —  <a id=the-input-element:navigable href=document-sequences.html#navigable>Navigable</a> for <a id=the-input-element:form-submission-2-6 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dd><code id=the-input-element:attr-input-list><a href=#attr-input-list>list</a></code> —  List of autocomplete options
     <dd><code id=the-input-element:attr-input-max><a href=#attr-input-max>max</a></code> —  Maximum value
     <dd><code id=the-input-element:attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> —  Maximum <a id=the-input-element:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of value
     <dd><code id=the-input-element:attr-input-min><a href=#attr-input-min>min</a></code> —  Minimum value
     <dd><code id=the-input-element:attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> —  Minimum <a id=the-input-element:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of value
     <dd><code id=the-input-element:attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> —  Whether to allow multiple values
     <dd><code id=the-input-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> —  Name of the element to use for <a id=the-input-element:form-submission-2-7 href=form-control-infrastructure.html#form-submission-2>form submission</a> and in the <code id=the-input-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API 
     <dd><code id=the-input-element:attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> —  Pattern to be matched by the form control's value
     <dd><code id=the-input-element:attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> —  User-visible label to be placed within the form control
     <dd><code id=the-input-element:attr-popovertarget><a href=popover.html#attr-popovertarget>popovertarget</a></code> —  Targets a popover element to toggle, show, or hide
     <dd><code id=the-input-element:attr-popovertargetaction><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code> —  Indicates whether a targeted popover element is to be toggled, shown, or hidden
     <dd><code id=the-input-element:attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> —  Whether to allow the value to be edited by the user
     <dd><code id=the-input-element:attr-input-required><a href=#attr-input-required>required</a></code> —  Whether the control is required for <a id=the-input-element:form-submission-2-8 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-input-size><a href=#attr-input-size>size</a></code> —  Size of the control
     <dd><code id=the-input-element:attr-input-src><a href=#attr-input-src>src</a></code> —  Address of the resource
     <dd><code id=the-input-element:attr-input-step><a href=#attr-input-step>step</a></code> —  Granularity to be matched by the form control's value
     <dd><code id=the-input-element:attr-input-type-5><a href=#attr-input-type>type</a></code> —  Type of form control
     <dd><code id=the-input-element:attr-input-value><a href=#attr-input-value>value</a></code> —  Value of the form control
     <dd><code id=the-input-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd>Also, the <code id=the-input-element:attr-input-title><a href=#attr-input-title>title</a></code> attribute <a href=#attr-input-title id=the-input-element:attr-input-title-2>has special semantics</a> on this element:  Description of pattern (when used with <code id=the-input-element:attr-input-pattern-2><a href=#attr-input-pattern>pattern</a></code> attribute)
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-input-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><code id=the-input-element:attr-input-type-6><a href=#attr-input-type>type</a></code> attribute in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-5">Hidden</a> state: <a href=https://w3c.github.io/html-aria/#el-input-hidden>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-hidden>for implementers</a>.<dd><code id=the-input-element:attr-input-type-7><a href=#attr-input-type>type</a></code> attribute in the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)">Text</a> state: <a href=https://w3c.github.io/html-aria/#el-input-text>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-text>for implementers</a>.<dd><code id=the-input-element:attr-input-type-8><a href=#attr-input-type>type</a></code> attribute in the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-2">Search</a> state: <a href=https://w3c.github.io/html-aria/#el-input-search>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-search>for implementers</a>.<dd><code id=the-input-element:attr-input-type-9><a href=#attr-input-type>type</a></code> attribute in the <a href="#telephone-state-(type=tel)" id="the-input-element:telephone-state-(type=tel)">Telephone</a> state: <a href=https://w3c.github.io/html-aria/#el-input-tel>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-tel>for implementers</a>.<dd><code id=the-input-element:attr-input-type-10><a href=#attr-input-type>type</a></code> attribute in the <a href="#url-state-(type=url)" id="the-input-element:url-state-(type=url)">URL</a> state: <a href=https://w3c.github.io/html-aria/#el-input-url>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-url>for implementers</a>.<dd><code id=the-input-element:attr-input-type-11><a href=#attr-input-type>type</a></code> attribute in the <a href="#email-state-(type=email)" id="the-input-element:email-state-(type=email)">Email</a> state: <a href=https://w3c.github.io/html-aria/#el-input-email>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-email>for implementers</a>.<dd><code id=the-input-element:attr-input-type-12><a href=#attr-input-type>type</a></code> attribute in the <a href="#password-state-(type=password)" id="the-input-element:password-state-(type=password)">Password</a> state: <a href=https://w3c.github.io/html-aria/#el-input-password>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-password>for implementers</a>.<dd><code id=the-input-element:attr-input-type-13><a href=#attr-input-type>type</a></code> attribute in the <a href="#date-state-(type=date)" id="the-input-element:date-state-(type=date)">Date</a> state: <a href=https://w3c.github.io/html-aria/#el-input-date>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-date>for implementers</a>.<dd><code id=the-input-element:attr-input-type-14><a href=#attr-input-type>type</a></code> attribute in the <a href="#month-state-(type=month)" id="the-input-element:month-state-(type=month)">Month</a> state: <a href=https://w3c.github.io/html-aria/#el-input-month>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-month>for implementers</a>.<dd><code id=the-input-element:attr-input-type-15><a href=#attr-input-type>type</a></code> attribute in the <a href="#week-state-(type=week)" id="the-input-element:week-state-(type=week)">Week</a> state: <a href=https://w3c.github.io/html-aria/#el-input-week>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-week>for implementers</a>.<dd><code id=the-input-element:attr-input-type-16><a href=#attr-input-type>type</a></code> attribute in the <a href="#time-state-(type=time)" id="the-input-element:time-state-(type=time)">Time</a> state: <a href=https://w3c.github.io/html-aria/#el-input-time>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-time>for implementers</a>.<dd><code id=the-input-element:attr-input-type-17><a href=#attr-input-type>type</a></code> attribute in the <a href="#local-date-and-time-state-(type=datetime-local)" id="the-input-element:local-date-and-time-state-(type=datetime-local)">Local Date and Time</a> state: <a href=https://w3c.github.io/html-aria/#el-input-datetime-local>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-datetime-local>for implementers</a>.<dd><code id=the-input-element:attr-input-type-18><a href=#attr-input-type>type</a></code> attribute in the <a href="#number-state-(type=number)" id="the-input-element:number-state-(type=number)">Number</a> state: <a href=https://w3c.github.io/html-aria/#el-input-number>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-number>for implementers</a>.<dd><code id=the-input-element:attr-input-type-19><a href=#attr-input-type>type</a></code> attribute in the <a href="#range-state-(type=range)" id="the-input-element:range-state-(type=range)">Range</a> state: <a href=https://w3c.github.io/html-aria/#el-input-range>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-range>for implementers</a>.<dd><code id=the-input-element:attr-input-type-20><a href=#attr-input-type>type</a></code> attribute in the <a href="#color-state-(type=color)" id="the-input-element:color-state-(type=color)">Color</a> state: <a href=https://w3c.github.io/html-aria/#el-input-color>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-color>for implementers</a>.<dd><code id=the-input-element:attr-input-type-21><a href=#attr-input-type>type</a></code> attribute in the <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)">Checkbox</a> state: <a href=https://w3c.github.io/html-aria/#el-input-checkbox>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-checkbox>for implementers</a>.<dd><code id=the-input-element:attr-input-type-22><a href=#attr-input-type>type</a></code> attribute in the <a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)">Radio Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-radio>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-radio>for implementers</a>.<dd><code id=the-input-element:attr-input-type-23><a href=#attr-input-type>type</a></code> attribute in the <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-2">File Upload</a> state: <a href=https://w3c.github.io/html-aria/#el-input-file>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-file>for implementers</a>.<dd><code id=the-input-element:attr-input-type-24><a href=#attr-input-type>type</a></code> attribute in the <a href="#submit-button-state-(type=submit)" id="the-input-element:submit-button-state-(type=submit)">Submit Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-submit>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-submit>for implementers</a>.<dd><code id=the-input-element:attr-input-type-25><a href=#attr-input-type>type</a></code> attribute in the <a href="#image-button-state-(type=image)" id="the-input-element:image-button-state-(type=image)">Image Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-image>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-image>for implementers</a>.<dd><code id=the-input-element:attr-input-type-26><a href=#attr-input-type>type</a></code> attribute in the <a href="#reset-button-state-(type=reset)" id="the-input-element:reset-button-state-(type=reset)">Reset Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-reset>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-reset>for implementers</a>.<dd><code id=the-input-element:attr-input-type-27><a href=#attr-input-type>type</a></code> attribute in the <a href="#button-state-(type=button)" id="the-input-element:button-state-(type=button)">Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-button>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-button>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-input-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLInputElement</code>.</dl>

  <p>The <code id=the-input-element:the-input-element><a href=#the-input-element>input</a></code> element <a id=the-input-element:represents href=dom.html#represents>represents</a> a typed data field, usually with a form
  control to allow the user to edit the data.</p>

  <p>The <dfn data-dfn-for=input id=attr-input-type data-dfn-type=element-attr><code>type</code></dfn> attribute
  controls the data type (and associated control) of the element. It is an <a id=the-input-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a> with the following keywords and states:</p>

  <table id=attr-input-type-keywords><thead><tr><th> Keyword
     <th> State
     <th> Data type
     <th> Control type
   <tbody><tr><td> <dfn data-dfn-for=input/type id=attr-input-type-hidden-keyword data-dfn-type=attr-value><code>hidden</code></dfn>
     <td> <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-6">Hidden</a>
     <td> An arbitrary string
     <td> n/a
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-text-keyword data-dfn-type=attr-value><code>text</code></dfn>
     <td> <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-3">Text</a>
     <td> Text with no line breaks
     <td> A text control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-search-keyword data-dfn-type=attr-value><code>search</code></dfn>
     <td> <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-4">Search</a>
     <td> Text with no line breaks
     <td> Search control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-tel-keyword data-dfn-type=attr-value><code>tel</code></dfn>
     <td> <a href="#telephone-state-(type=tel)" id="the-input-element:telephone-state-(type=tel)-2">Telephone</a>
     <td> Text with no line breaks
     <td> A text control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-url-keyword data-dfn-type=attr-value><code>url</code></dfn>
     <td> <a href="#url-state-(type=url)" id="the-input-element:url-state-(type=url)-2">URL</a>
     <td> An absolute URL
     <td> A text control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-email-keyword data-dfn-type=attr-value><code>email</code></dfn>
     <td> <a href="#email-state-(type=email)" id="the-input-element:email-state-(type=email)-2">Email</a>
     <td> An email address or list of email addresses
     <td> A text control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-password-keyword data-dfn-type=attr-value><code>password</code></dfn>
     <td> <a href="#password-state-(type=password)" id="the-input-element:password-state-(type=password)-2">Password</a>
     <td> Text with no line breaks (sensitive information)
     <td> A text control that obscures data entry
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-date-keyword data-dfn-type=attr-value><code>date</code></dfn>
     <td> <a href="#date-state-(type=date)" id="the-input-element:date-state-(type=date)-2">Date</a>
     <td> A date (year, month, day) with no time zone
     <td> A date control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-month-keyword data-dfn-type=attr-value><code>month</code></dfn>
     <td> <a href="#month-state-(type=month)" id="the-input-element:month-state-(type=month)-2">Month</a>
     <td> A date consisting of a year and a month with no time zone
     <td> A month control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-week-keyword data-dfn-type=attr-value><code>week</code></dfn>
     <td> <a href="#week-state-(type=week)" id="the-input-element:week-state-(type=week)-2">Week</a>
     <td> A date consisting of a week-year number and a week number with no time zone
     <td> A week control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-time-keyword data-dfn-type=attr-value><code>time</code></dfn>
     <td> <a href="#time-state-(type=time)" id="the-input-element:time-state-(type=time)-2">Time</a>
     <td> A time (hour, minute, seconds, fractional seconds) with no time zone
     <td> A time control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-datetime-local-keyword data-dfn-type=attr-value><code>datetime-local</code></dfn>
     <td> <a href="#local-date-and-time-state-(type=datetime-local)" id="the-input-element:local-date-and-time-state-(type=datetime-local)-2">Local Date and Time</a>
     <td> A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone
     <td> A date and time control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-number-keyword data-dfn-type=attr-value><code>number</code></dfn>
     <td> <a href="#number-state-(type=number)" id="the-input-element:number-state-(type=number)-2">Number</a>
     <td> A numerical value
     <td> A text control or spinner control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-range-keyword data-dfn-type=attr-value><code>range</code></dfn>
     <td> <a href="#range-state-(type=range)" id="the-input-element:range-state-(type=range)-2">Range</a>
     <td> A numerical value, with the extra semantic that the exact value is not important
     <td> A slider control or similar
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-color-keyword data-dfn-type=attr-value><code>color</code></dfn>
     <td> <a href="#color-state-(type=color)" id="the-input-element:color-state-(type=color)-2">Color</a>
     <td> An sRGB color with 8-bit red, green, and blue components
     <td> A color picker
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-checkbox-keyword data-dfn-type=attr-value><code>checkbox</code></dfn>
     <td> <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-2">Checkbox</a>
     <td> A set of zero or more values from a predefined list
     <td> A checkbox
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-radio-keyword data-dfn-type=attr-value><code>radio</code></dfn>
     <td> <a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)-2">Radio Button</a>
     <td> An enumerated value
     <td> A radio button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-file-keyword data-dfn-type=attr-value><code>file</code></dfn>
     <td> <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-3">File Upload</a>
     <td> Zero or more files each with a <a id=the-input-element:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> and optionally a filename
     <td> A label and a button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-submit-keyword data-dfn-type=attr-value><code>submit</code></dfn>
     <td> <a href="#submit-button-state-(type=submit)" id="the-input-element:submit-button-state-(type=submit)-2">Submit Button</a>
     <td> An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission
     <td> A button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-image-keyword data-dfn-type=attr-value><code>image</code></dfn>
     <td> <a href="#image-button-state-(type=image)" id="the-input-element:image-button-state-(type=image)-2">Image Button</a>
     <td> A coordinate, relative to a particular image's size, with the extra semantic that it must
     be the last value selected and initiates form submission
     <td> Either a clickable image, or a button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-reset-keyword data-dfn-type=attr-value><code>reset</code></dfn>
     <td> <a href="#reset-button-state-(type=reset)" id="the-input-element:reset-button-state-(type=reset)-2">Reset Button</a>
     <td> n/a
     <td> A button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-button-keyword data-dfn-type=attr-value><code>button</code></dfn>
     <td> <a href="#button-state-(type=button)" id="the-input-element:button-state-(type=button)-2">Button</a>
     <td> n/a
     <td> A button
  </table>

  <p>The attribute's <i id=the-input-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-input-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-5">Text</a> state.</p>

  <p>Which of the
   <code id=the-input-element:attr-input-accept-2><a href=#attr-input-accept>accept</a></code>,
   <code id=the-input-element:attr-input-alpha-2><a href=#attr-input-alpha>alpha</a></code>,
   <code id=the-input-element:attr-input-alt-2><a href=#attr-input-alt>alt</a></code>,
   <code id=the-input-element:attr-fe-autocomplete-2><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id=the-input-element:attr-input-checked-2><a href=#attr-input-checked>checked</a></code>,
   <code id=the-input-element:attr-input-colorspace-2><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id=the-input-element:attr-fe-dirname-2><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id=the-input-element:attr-fs-formaction-2><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id=the-input-element:attr-fs-formenctype-2><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id=the-input-element:attr-fs-formmethod-2><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id=the-input-element:attr-fs-formnovalidate-2><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id=the-input-element:attr-fs-formtarget-2><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id=the-input-element:attr-dim-height-2><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id=the-input-element:attr-input-list-2><a href=#attr-input-list>list</a></code>,
   <code id=the-input-element:attr-input-max-2><a href=#attr-input-max>max</a></code>,
   <code id=the-input-element:attr-input-maxlength-2><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id=the-input-element:attr-input-min-2><a href=#attr-input-min>min</a></code>,
   <code id=the-input-element:attr-input-minlength-2><a href=#attr-input-minlength>minlength</a></code>,
   <code id=the-input-element:attr-input-multiple-2><a href=#attr-input-multiple>multiple</a></code>,
   <code id=the-input-element:attr-input-pattern-3><a href=#attr-input-pattern>pattern</a></code>,
   <code id=the-input-element:attr-input-placeholder-2><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id=the-input-element:attr-input-readonly-2><a href=#attr-input-readonly>readonly</a></code>,
   <code id=the-input-element:attr-input-required-2><a href=#attr-input-required>required</a></code>,
   <code id=the-input-element:attr-input-size-2><a href=#attr-input-size>size</a></code>,
   <code id=the-input-element:attr-input-src-2><a href=#attr-input-src>src</a></code>,
   <code id=the-input-element:attr-input-step-2><a href=#attr-input-step>step</a></code>, and
   <code id=the-input-element:attr-dim-width-2><a href=embedded-content-other.html#attr-dim-width>width</a></code> content attributes, the
   <code id=the-input-element:dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   <code id=the-input-element:dom-input-files><a href=#dom-input-files>files</a></code>,
   <code id=the-input-element:dom-input-valueasdate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   <code id=the-input-element:dom-input-valueasnumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code id=the-input-element:dom-input-list><a href=#dom-input-list>list</a></code> IDL attributes, the
   <code id=the-input-element:dom-textarea/input-select><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method, the
   <code id=the-input-element:dom-textarea/input-selectionstart><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id=the-input-element:dom-textarea/input-selectionend><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id=the-input-element:dom-textarea/input-selectiondirection><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, IDL attributes, the
   <code id=the-input-element:dom-textarea/input-setrangetext><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code> and
   <code id=the-input-element:dom-textarea/input-setselectionrange><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods, the
   <code id=the-input-element:dom-input-stepup><a href=#dom-input-stepup>stepUp()</a></code> and
   <code id=the-input-element:dom-input-stepdown><a href=#dom-input-stepdown>stepDown()</a></code> methods, and the
   <code id=the-input-element:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and
   <code id=the-input-element:event-change><a href=indices.html#event-change>change</a></code> events <dfn id=concept-input-apply>apply</dfn> to an
   <code id=the-input-element:the-input-element-2><a href=#the-input-element>input</a></code> element depends on the state of its
   <code id=the-input-element:attr-input-type-28><a href=#attr-input-type>type</a></code> attribute.
  The subsections that define each type also clearly define in normative "bookkeeping" sections
  which of these feature apply, and which <dfn id=do-not-apply>do not apply</dfn>, to each type. The behavior of
  these features depends on whether they apply or not, as defined in their various sections (q.v.
  for <a href=#common-input-element-attributes>content attributes</a>, for <a href=#common-input-element-apis>APIs</a>, for <a href=#common-input-element-events>events</a>).</p>

  <p>The following table  summarizes which of those
  content attributes, IDL attributes, methods, and events <a href=#concept-input-apply id=the-input-element:concept-input-apply>apply</a> to each state:</p>

  <table id=input-type-attr-summary class=applies><thead><tr><th>
     <th> <span><a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-7">Hidden</a></span>
     <th> <span><a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-6">Text</a>,</span>
          <span><a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-7">Search</a></span>
     <th> <span><a href="#telephone-state-(type=tel)" id="the-input-element:telephone-state-(type=tel)-3">Telephone</a>,</span>
          <span><a href="#url-state-(type=url)" id="the-input-element:url-state-(type=url)-3">URL</a></span>
     <th> <span><a href="#email-state-(type=email)" id="the-input-element:email-state-(type=email)-3">Email</a></span>
     <th> <span><a href="#password-state-(type=password)" id="the-input-element:password-state-(type=password)-3">Password</a></span>
     <th> <span><a href="#date-state-(type=date)" id="the-input-element:date-state-(type=date)-3">Date</a>,</span>
          <span><a href="#month-state-(type=month)" id="the-input-element:month-state-(type=month)-3">Month</a>,</span>
          <span><a href="#week-state-(type=week)" id="the-input-element:week-state-(type=week)-3">Week</a>,</span>
          <span><a href="#time-state-(type=time)" id="the-input-element:time-state-(type=time)-3">Time</a></span>
     <th> <span><a href="#local-date-and-time-state-(type=datetime-local)" id="the-input-element:local-date-and-time-state-(type=datetime-local)-3">Local Date and Time</a></span>
     <th> <span><a href="#number-state-(type=number)" id="the-input-element:number-state-(type=number)-3">Number</a></span>
     <th> <span><a href="#range-state-(type=range)" id="the-input-element:range-state-(type=range)-3">Range</a></span>
     <th> <span><a href="#color-state-(type=color)" id="the-input-element:color-state-(type=color)-3">Color</a></span>
     <th> <span><a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-3">Checkbox</a>,</span>
          <span><a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)-3">Radio Button</a></span>
     <th> <span><a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-4">File Upload</a></span>
     <th> <span><a href="#submit-button-state-(type=submit)" id="the-input-element:submit-button-state-(type=submit)-3">Submit Button</a></span>
     <th> <span><a href="#image-button-state-(type=image)" id="the-input-element:image-button-state-(type=image)-3">Image Button</a></span>
     <th> <span><a href="#reset-button-state-(type=reset)" id="the-input-element:reset-button-state-(type=reset)-3">Reset Button</a>,</span>
          <span><a href="#button-state-(type=button)" id="the-input-element:button-state-(type=button)-3">Button</a></span>

   <tbody><tr><th colspan=16 scope=rowgroup>Content attributes

    <tr><th> <code id=the-input-element:attr-input-accept-3><a href=#attr-input-accept>accept</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-alpha-3><a href=#attr-input-alpha>alpha</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-alt-3><a href=#attr-input-alt>alt</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fe-autocomplete-3><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>
     <td class=yes> Yes     
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-checked-3><a href=#attr-input-checked>checked</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-colorspace-3><a href=#attr-input-colorspace>colorspace</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fe-dirname-3><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>
     <td class=yes> Yes     
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formaction-3><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formenctype-3><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formmethod-3><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formnovalidate-3><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formtarget-3><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-dim-height-3><a href=embedded-content-other.html#attr-dim-height>height</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-list-3><a href=#attr-input-list>list</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-max-3><a href=#attr-input-max>max</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-maxlength-3><a href=#attr-input-maxlength>maxlength</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-min-3><a href=#attr-input-min>min</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-minlength-3><a href=#attr-input-minlength>minlength</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-multiple-3><a href=#attr-input-multiple>multiple</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> ·  
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-pattern-4><a href=#attr-input-pattern>pattern</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-placeholder-3><a href=#attr-input-placeholder>placeholder</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-popovertarget-2><a href=popover.html#attr-popovertarget>popovertarget</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     


    <tr><th> <code id=the-input-element:attr-popovertargetaction-2><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     


    <tr><th> <code id=the-input-element:attr-input-readonly-3><a href=#attr-input-readonly>readonly</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-required-3><a href=#attr-input-required>required</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-size-3><a href=#attr-input-size>size</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-src-3><a href=#attr-input-src>src</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-step-3><a href=#attr-input-step>step</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-dim-width-3><a href=embedded-content-other.html#attr-dim-width>width</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 


   <tbody><tr><th colspan=16 scope=rowgroup>IDL attributes and methods

    <tr><th> <code id=the-input-element:dom-input-checked-2><a href=#dom-input-checked>checked</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-files-2><a href=#dom-input-files>files</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-valueasdate-2><a href=#dom-input-valueasdate>valueAsDate</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-valueasnumber-2><a href=#dom-input-valueasnumber>valueAsNumber</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-list-2><a href=#dom-input-list>list</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-select-2><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>
     <td class=no> ·     
     <td class=yes> Yes         

     <td class=yes> Yes         
     <td class=yes> Yes† 
     <td class=yes> Yes         
     <td class=yes> Yes† 



     <td class=yes> Yes† 
     <td class=yes> Yes† 
     <td class=no> ·     
     <td class=yes> Yes† 
     <td class=no> ·     

     <td class=yes> Yes† 
     <td class=no> ·     
     <td class=no> ·     
     <td class=no> ·     


    <tr><th> <code id=the-input-element:dom-textarea/input-selectionstart-2><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-selectionend-2><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-selectiondirection-2><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-setrangetext-2><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-setselectionrange-2><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-stepdown-2><a href=#dom-input-stepdown>stepDown()</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-stepup-2><a href=#dom-input-stepup>stepUp()</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


   <tbody><tr><th colspan=16 scope=rowgroup>Events

    <tr><th> <span><code id=the-input-element:event-input-2><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> event</span>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <span><code id=the-input-element:event-change-2><a href=indices.html#event-change>change</a></code> event</span>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


  </table>

  <p class=tablenote><small>† If the control has no selectable text, the <code id=the-input-element:dom-textarea/input-select-3><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method results in a no-op, with no
  <a id=the-input-element:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-input-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</small></p>

  

  <p>The <dfn data-dfn-for=input id=attr-input-value data-dfn-type=element-attr><code>value</code></dfn> content
  attribute gives the default <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value>value</a> of the <code id=the-input-element:the-input-element-3><a href=#the-input-element>input</a></code>
  element. </p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#checked title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#checked</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-checked data-dfn-type=element-attr><code>checked</code></dfn>
  content attribute is a <a id=the-input-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that gives the default <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked>checkedness</a> of the <code id=the-input-element:the-input-element-4><a href=#the-input-element>input</a></code> element. </p>

  

  

  <hr>

  <p>
  The <code id=the-input-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name.
  The <code id=the-input-element:attr-fe-dirname-4><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> attribute controls how the element's <a href=dom.html#the-directionality id=the-input-element:the-directionality-2>directionality</a> is submitted.
  The <code id=the-input-element:attr-fe-disabled-2><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is used to make the control non-interactive and to prevent its value from being submitted.
  The <code id=the-input-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the <code id=the-input-element:the-input-element-5><a href=#the-input-element>input</a></code> element with its <a id=the-input-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>.
  The <code id=the-input-element:attr-fe-autocomplete-4><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent provides autofill behavior.
  </p>

  



  <h5 id=states-of-the-type-attribute><span class=secno>4.10.5.1</span> States of the <code id=states-of-the-type-attribute:attr-input-type><a href=#attr-input-type>type</a></code> attribute<a href=#states-of-the-type-attribute class=self-link></a></h5>


  <h6 id="hidden-state-(type=hidden)"><span class=secno>4.10.5.1.1</span> <dfn data-dfn-for=input data-dfn-type=element-state>Hidden</dfn> state (<code>type=hidden</code>)<a href="#hidden-state-(type=hidden)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden title="<input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.">Element/input/hidden</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>2+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="hidden-state-(type=hidden):the-input-element"><a href=#the-input-element>input</a></code> element <a id="hidden-state-(type=hidden):represents" href=dom.html#represents>represents</a> a value that is not intended to be
  examined or manipulated by the user.</p>

  

  <p>If the <code id="hidden-state-(type=hidden):attr-fe-name"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute is present and has a value that is an
  <a id="hidden-state-(type=hidden):ascii-case-insensitive" href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code id="hidden-state-(type=hidden):attr-fe-name-charset"><a href=form-control-infrastructure.html#attr-fe-name-charset>_charset_</a></code>", then the element's <code id="hidden-state-(type=hidden):attr-input-value"><a href=#attr-input-value>value</a></code> attribute must be omitted.</p>

  <div class=bookkeeping>

   <p>The
   <code id="hidden-state-(type=hidden):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> and
   <code id="hidden-state-(type=hidden):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>
   content attributes <a href=#concept-input-apply id="hidden-state-(type=hidden):concept-input-apply">apply</a> to this element.</p>

   <p>The
   <code id="hidden-state-(type=hidden):dom-input-value"><a href=#dom-input-value>value</a></code>
   IDL attribute <a href=#concept-input-apply id="hidden-state-(type=hidden):concept-input-apply-2">applies</a> to this element and is
   in mode <span>default</span>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="hidden-state-(type=hidden):do-not-apply">do not
   apply</a> to the element:
   <code id="hidden-state-(type=hidden):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="hidden-state-(type=hidden):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="hidden-state-(type=hidden):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="hidden-state-(type=hidden):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="hidden-state-(type=hidden):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="hidden-state-(type=hidden):do-not-apply-2">do not apply</a> to the
   element:
   <code id="hidden-state-(type=hidden):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="hidden-state-(type=hidden):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="hidden-state-(type=hidden):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="hidden-state-(type=hidden):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="hidden-state-(type=hidden):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="hidden-state-(type=hidden):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="hidden-state-(type=hidden):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="hidden-state-(type=hidden):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="hidden-state-(type=hidden):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="hidden-state-(type=hidden):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="hidden-state-(type=hidden):do-not-apply-3">do not apply</a>.</p>

  </div>


  <h6 id="text-(type=text)-state-and-search-state-(type=search)"><span class=secno>4.10.5.1.2</span> <dfn data-dfn-for=input data-dfn-type=element-state>Text</dfn> (<code>type=text</code>) state and <dfn data-dfn-for=input data-dfn-type=element-state>Search</dfn> state (<code>type=search</code>)<a href="#text-(type=text)-state-and-search-state-(type=search)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search title="<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.">Element/input/search</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text title="<input> elements of type text create basic single-line text fields.">Element/input/text</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  

  <p>The <code id="text-(type=text)-state-and-search-state-(type=search):the-input-element"><a href=#the-input-element>input</a></code> element <a id="text-(type=text)-state-and-search-state-(type=search):represents" href=dom.html#represents>represents</a> a one line plain text edit control for
  the element's <a href=form-control-infrastructure.html#concept-fe-value id="text-(type=text)-state-and-search-state-(type=search):concept-fe-value">value</a>.</p>

  <p class=note>The difference between the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="text-(type=text)-state-and-search-state-(type=search):text-(type=text)-state-and-search-state-(type=search)">Text</a> state
  and the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="text-(type=text)-state-and-search-state-(type=search):text-(type=text)-state-and-search-state-(type=search)-2">Search</a> state is primarily stylistic: on
  platforms where search controls are distinguished from regular text controls, the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="text-(type=text)-state-and-search-state-(type=search):text-(type=text)-state-and-search-state-(type=search)-3">Search</a> state might result in an appearance consistent with
  the platform's search controls rather than appearing like a regular text control.</p>

  

  <p>The <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="text-(type=text)-state-and-search-state-(type=search):the-input-element-2"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="text-(type=text)-state-and-search-state-(type=search):concept-input-apply">apply</a> to the element:
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <span>value</span>.</p>

   <p>The <code id="text-(type=text)-state-and-search-state-(type=search):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="text-(type=text)-state-and-search-state-(type=search):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="text-(type=text)-state-and-search-state-(type=search):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="text-(type=text)-state-and-search-state-(type=search):do-not-apply">do not
   apply</a> to the element:
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="text-(type=text)-state-and-search-state-(type=search):do-not-apply-2">do not apply</a> to the
   element:
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="telephone-state-(type=tel)"><span class=secno>4.10.5.1.3</span> <dfn data-dfn-for=input data-dfn-type=element-state>Telephone</dfn> state (<code>type=tel</code>)<a href="#telephone-state-(type=tel)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel title="<input> elements of type tel are used to let the user enter and edit a telephone number. Unlike <input type=&quot;email&quot;> and <input type=&quot;url&quot;>, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.">Element/input/tel</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>Yes</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>18+</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>The <code id="telephone-state-(type=tel):the-input-element"><a href=#the-input-element>input</a></code> element <a id="telephone-state-(type=tel):represents" href=dom.html#represents>represents</a> a control for editing a telephone number
  given in the element's <a href=form-control-infrastructure.html#concept-fe-value id="telephone-state-(type=tel):concept-fe-value">value</a>.</p>

  

  <p>The <code id="telephone-state-(type=tel):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.</p>

  

  <p class=note>Unlike the <a href="#url-state-(type=url)" id="telephone-state-(type=tel):url-state-(type=url)">URL</a> and <a href="#email-state-(type=email)" id="telephone-state-(type=tel):email-state-(type=email)">Email</a> types, the <a href="#telephone-state-(type=tel)" id="telephone-state-(type=tel):telephone-state-(type=tel)">Telephone</a> type does not enforce a particular syntax. This is
  intentional; in practice, telephone number fields tend to be free-form fields, because there are a
  wide variety of valid phone numbers. Systems that need to enforce a particular format are
  encouraged to use the <code id="telephone-state-(type=tel):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code> attribute or the <code id="telephone-state-(type=tel):dom-cva-setcustomvalidity"><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method to hook into the client-side
  validation mechanism.</p>


  <div class=bookkeeping>

   <p>The following common <code id="telephone-state-(type=tel):the-input-element-2"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="telephone-state-(type=tel):concept-input-apply">apply</a> to the element:
   <code id="telephone-state-(type=tel):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="telephone-state-(type=tel):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="telephone-state-(type=tel):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="telephone-state-(type=tel):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="telephone-state-(type=tel):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="telephone-state-(type=tel):attr-input-pattern-2"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="telephone-state-(type=tel):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="telephone-state-(type=tel):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="telephone-state-(type=tel):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="telephone-state-(type=tel):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="telephone-state-(type=tel):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="telephone-state-(type=tel):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="telephone-state-(type=tel):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="telephone-state-(type=tel):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="telephone-state-(type=tel):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="telephone-state-(type=tel):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="telephone-state-(type=tel):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="telephone-state-(type=tel):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code id="telephone-state-(type=tel):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <span>value</span>.</p>

   <p>The <code id="telephone-state-(type=tel):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="telephone-state-(type=tel):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="telephone-state-(type=tel):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="telephone-state-(type=tel):do-not-apply">do not
   apply</a> to the element:
   <code id="telephone-state-(type=tel):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="telephone-state-(type=tel):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="telephone-state-(type=tel):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="telephone-state-(type=tel):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="telephone-state-(type=tel):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="telephone-state-(type=tel):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="telephone-state-(type=tel):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="telephone-state-(type=tel):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="telephone-state-(type=tel):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="telephone-state-(type=tel):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="telephone-state-(type=tel):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="telephone-state-(type=tel):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="telephone-state-(type=tel):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="telephone-state-(type=tel):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="telephone-state-(type=tel):do-not-apply-2">do not apply</a> to the
   element:
   <code id="telephone-state-(type=tel):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="telephone-state-(type=tel):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="telephone-state-(type=tel):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="telephone-state-(type=tel):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="telephone-state-(type=tel):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="telephone-state-(type=tel):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="url-state-(type=url)"><span class=secno>4.10.5.1.4</span> <dfn data-dfn-for=input data-dfn-type=element-state>URL</dfn> state (<code>type=url</code>)<a href="#url-state-(type=url)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url title="<input> elements of type url are used to let the user enter and edit a URL.">Element/input/url</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="url-state-(type=url):the-input-element"><a href=#the-input-element>input</a></code> element <a id="url-state-(type=url):represents" href=dom.html#represents>represents</a> a control for editing a single
  <a id="url-state-(type=url):absolute-url" href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a> given in the element's <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value">value</a>.</p>

  

  <p>The <code id="url-state-(type=url):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="url-state-(type=url):valid-url-potentially-surrounded-by-spaces" href=urls-and-fetching.html#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by spaces</a> that is also an
  <a id="url-state-(type=url):absolute-url-2" href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a>.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="url-state-(type=url):the-input-element-2"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="url-state-(type=url):concept-input-apply">apply</a> to the element:
   <code id="url-state-(type=url):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="url-state-(type=url):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="url-state-(type=url):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="url-state-(type=url):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="url-state-(type=url):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="url-state-(type=url):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="url-state-(type=url):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="url-state-(type=url):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="url-state-(type=url):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="url-state-(type=url):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="url-state-(type=url):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="url-state-(type=url):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="url-state-(type=url):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="url-state-(type=url):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="url-state-(type=url):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="url-state-(type=url):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="url-state-(type=url):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="url-state-(type=url):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code id="url-state-(type=url):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <span>value</span>.</p>

   <p>The <code id="url-state-(type=url):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="url-state-(type=url):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="url-state-(type=url):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="url-state-(type=url):do-not-apply">do not
   apply</a> to the element:
   <code id="url-state-(type=url):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="url-state-(type=url):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="url-state-(type=url):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="url-state-(type=url):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="url-state-(type=url):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="url-state-(type=url):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="url-state-(type=url):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="url-state-(type=url):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="url-state-(type=url):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="url-state-(type=url):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="url-state-(type=url):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="url-state-(type=url):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="url-state-(type=url):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="url-state-(type=url):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="url-state-(type=url):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="url-state-(type=url):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="url-state-(type=url):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="url-state-(type=url):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="url-state-(type=url):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="url-state-(type=url):do-not-apply-2">do not apply</a> to the
   element:
   <code id="url-state-(type=url):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="url-state-(type=url):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="url-state-(type=url):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="url-state-(type=url):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="url-state-(type=url):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="url-state-(type=url):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>If a document contained the following markup:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;url&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;location&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;urls&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;urls&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;MIME: Format of Internet Message Bodies&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://www.rfc-editor.org/rfc/rfc2045&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;HTML&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://html.spec.whatwg.org/&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;DOM&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://dom.spec.whatwg.org/&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Fullscreen&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://fullscreen.spec.whatwg.org/&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Media Session&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://mediasession.spec.whatwg.org/&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;The Single UNIX Specification, Version 3&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;http://www.unix.org/version3/&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>...and the user had typed "<kbd>spec.w</kbd>", and the user agent had also found that the user
   had visited <code>https://url.spec.whatwg.org/#url-parsing</code> and <code>https://streams.spec.whatwg.org/</code> in the recent past, then the rendering might look
   like this:</p>

   <p><img class=darkmode-aware width=480 alt="A text box with an icon on the left followed by the text &quot;spec.w&quot; and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scrollbar to the right of the drop down box, indicating further values are available." src=../images/sample-url.svg height=150></p>

   <p>The first four URLs in this sample consist of the four URLs in the author-specified list that
   match the text the user has entered, sorted in some <a id="url-state-(type=url):implementation-defined" href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner
   (maybe by how frequently the user refers to those URLs). Note how the UA is using the knowledge
   that the values are URLs to allow the user to omit the scheme part and perform intelligent
   matching on the domain name.</p>

   <p>The last two URLs (and probably many more, given the scrollbar's indications of more values
   being available) are the matches from the user agent's session history data. This data is not
   made available to the page DOM. In this particular case, the UA has no titles to provide for
   those values.</p>

  </div>


  <h6 id="email-state-(type=email)"><span class=secno>4.10.5.1.5</span> <dfn data-dfn-for=input data-dfn-type=element-state>Email</dfn> state (<code>type=email</code>)<span id="e-mail-state-(type=email)"></span><a href="#email-state-(type=email)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email title="<input> elements of type email are used to let the user enter and edit an email address, or, if the multiple attribute is specified, a list of email addresses.">Element/input/email</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>How the <a href="#email-state-(type=email)" id="email-state-(type=email):email-state-(type=email)">Email</a> state operates depends on whether the
  <code id="email-state-(type=email):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code> attribute is specified or not.</p>

  <dl class=switch><dt>When the <code id="email-state-(type=email):attr-input-multiple-2"><a href=#attr-input-multiple>multiple</a></code> attribute is not specified on the
   element<dd>
    <p>The <code id="email-state-(type=email):the-input-element"><a href=#the-input-element>input</a></code> element <a id="email-state-(type=email):represents" href=dom.html#represents>represents</a> a control for editing an email
    address given in the element's <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value">value</a>.</p>

    

    <p>The <code id="email-state-(type=email):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
    have a value that is a single <a href=#valid-e-mail-address id="email-state-(type=email):valid-e-mail-address">valid email address</a>.</p>

    
   <dt>When the <code id="email-state-(type=email):attr-input-multiple-3"><a href=#attr-input-multiple>multiple</a></code> attribute <em>is</em> specified on
   the element<dd>
    <p>The <code id="email-state-(type=email):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="email-state-(type=email):represents-2" href=dom.html#represents>represents</a> a control for adding, removing, and
    editing the email addresses given in the element's <a href=form-control-infrastructure.html#concept-fe-values id="email-state-(type=email):concept-fe-values">value<em>s</em></a>.</p>

    

    <p>The <code id="email-state-(type=email):attr-input-value-2"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value
    that is a <a href=#valid-e-mail-address-list id="email-state-(type=email):valid-e-mail-address-list">valid email address list</a>.</p>

    
   </dl>

  <p>When the <code id="email-state-(type=email):attr-input-multiple-4"><a href=#attr-input-multiple>multiple</a></code> attribute is set or removed, the
  user agent must run the <span>value sanitization algorithm</span>.</p>

  <p>A <dfn id=valid-e-mail-address>valid email address</dfn> is a string that matches the <code>email</code> production of the following ABNF, the character set for which is Unicode.
  This ABNF implements the extensions described in RFC 1123. <a href=references.html#refsABNF>[ABNF]</a> <a href=references.html#refsRFC5322>[RFC5322]</a>
  <a href=references.html#refsRFC1034>[RFC1034]</a> <a href=references.html#refsRFC1123>[RFC1123]</a></p>

  <pre><code class='abnf'><c- nc>email</c->         <c- o>=</c-> <c- o>1*</c-><c- p>(</c-> <c- nc>atext</c-> <c- o>/</c-> <c- l>&quot;.&quot;</c-> <c- p>)</c-> <c- l>&quot;@&quot;</c-> <c- nc>label</c-> <c- o>*</c-><c- p>(</c-> <c- l>&quot;.&quot;</c-> <c- nc>label</c-> <c- p>)</c->
<c- nc>label</c->         <c- o>=</c-> <c- nc>let-dig</c-> <c- p>[</c-> <c- p>[</c-> <c- nc>ldh-str</c-> <c- p>]</c-> <c- nc>let-dig</c-> <c- p>]</c->  <c- c1>; limited to a length of 63 characters by </c-><a href='https://www.rfc-editor.org/rfc/rfc1034#section-3.5'><c- c1>RFC 1034 section 3.5</c-></a>
<c- nc>atext</c->         <c- o>=</c-> &lt; <c- nc>as</c-> <c- nc>defined</c-> <c- nc>in</c-> <a href='https://www.rfc-editor.org/rfc/rfc5322#section-3.2.3'><c- nc>RFC</c-> <c- o>5322</c-> <c- nc>section</c-> <c- o>3</c->.<c- o>2</c->.<c- o>3</c-></a> &gt;
<c- nc>let-dig</c->       <c- o>=</c-> &lt; <c- nc>as</c-> <c- nc>defined</c-> <c- nc>in</c-> <a href='https://www.rfc-editor.org/rfc/rfc1034#section-3.5'><c- nc>RFC</c-> <c- o>1034</c-> <c- nc>section</c-> <c- o>3</c->.<c- o>5</c-></a> &gt;
<c- nc>ldh-str</c->       <c- o>=</c-> &lt; <c- nc>as</c-> <c- nc>defined</c-> <c- nc>in</c-> <a href='https://www.rfc-editor.org/rfc/rfc1034#section-3.5'><c- nc>RFC</c-> <c- o>1034</c-> <c- nc>section</c-> <c- o>3</c->.<c- o>5</c-></a> &gt;</code></pre>

  

  <p class=note>This requirement is a <a id="email-state-(type=email):willful-violation" href=https://infra.spec.whatwg.org/#willful-violation data-x-internal=willful-violation>willful violation</a> of RFC 5322, which defines a
  syntax for email addresses that is simultaneously too strict (before the "@" character), too
  vague (after the "@" character), and too lax (allowing comments, whitespace characters, and quoted
  strings in manners unfamiliar to most users) to be of practical use here.</p>

  <div class=note>

   <p>The following JavaScript- and Perl-compatible regular expression is an implementation of the
   above definition.</p>

   <pre>/^[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/</pre>

   

  </div>

  <p>A <dfn id=valid-e-mail-address-list>valid email address list</dfn> is a <a id="email-state-(type=email):set-of-comma-separated-tokens" href=common-microsyntaxes.html#set-of-comma-separated-tokens>set of
  comma-separated tokens</a>, where each token is itself a <a href=#valid-e-mail-address id="email-state-(type=email):valid-e-mail-address-2">valid email address</a>.
  </p>

  <div class=bookkeeping>

   <p>The following common <code id="email-state-(type=email):the-input-element-3"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="email-state-(type=email):concept-input-apply">apply</a> to the element:
   <code id="email-state-(type=email):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="email-state-(type=email):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="email-state-(type=email):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="email-state-(type=email):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="email-state-(type=email):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="email-state-(type=email):attr-input-multiple-5"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="email-state-(type=email):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="email-state-(type=email):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="email-state-(type=email):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="email-state-(type=email):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="email-state-(type=email):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="email-state-(type=email):dom-input-list"><a href=#dom-input-list>list</a></code> and
   <code id="email-state-(type=email):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="email-state-(type=email):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method.</p>



   <p>The <code id="email-state-(type=email):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <span>value</span>.</p>

   <p>The <code id="email-state-(type=email):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="email-state-(type=email):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="email-state-(type=email):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="email-state-(type=email):do-not-apply">do not
   apply</a> to the element:
   <code id="email-state-(type=email):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="email-state-(type=email):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="email-state-(type=email):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="email-state-(type=email):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="email-state-(type=email):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="email-state-(type=email):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="email-state-(type=email):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="email-state-(type=email):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="email-state-(type=email):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="email-state-(type=email):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="email-state-(type=email):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="email-state-(type=email):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="email-state-(type=email):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="email-state-(type=email):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="email-state-(type=email):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="email-state-(type=email):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="email-state-(type=email):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="email-state-(type=email):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="email-state-(type=email):do-not-apply-2">do not apply</a> to the
   element:
   <code id="email-state-(type=email):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="email-state-(type=email):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="email-state-(type=email):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="email-state-(type=email):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="email-state-(type=email):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="email-state-(type=email):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="email-state-(type=email):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="email-state-(type=email):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="email-state-(type=email):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="email-state-(type=email):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="email-state-(type=email):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="password-state-(type=password)"><span class=secno>4.10.5.1.6</span> <dfn data-dfn-for=input data-dfn-type=element-state>Password</dfn> state (<code>type=password</code>)<a href="#password-state-(type=password)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password title="<input> elements of type password provide a way for the user to securely enter a password.">Element/input/password</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>2+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>2+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="password-state-(type=password):the-input-element"><a href=#the-input-element>input</a></code> element <a id="password-state-(type=password):represents" href=dom.html#represents>represents</a> a one line plain text edit control for
  the element's <a href=form-control-infrastructure.html#concept-fe-value id="password-state-(type=password):concept-fe-value">value</a>. The user agent should obscure the value
  so that people other than the user cannot see it.</p>

  

  <p>The <code id="password-state-(type=password):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="password-state-(type=password):the-input-element-2"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="password-state-(type=password):concept-input-apply">apply</a> to the element:
   <code id="password-state-(type=password):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="password-state-(type=password):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="password-state-(type=password):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="password-state-(type=password):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="password-state-(type=password):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="password-state-(type=password):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="password-state-(type=password):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="password-state-(type=password):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="password-state-(type=password):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="password-state-(type=password):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="password-state-(type=password):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="password-state-(type=password):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="password-state-(type=password):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="password-state-(type=password):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="password-state-(type=password):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="password-state-(type=password):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code id="password-state-(type=password):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <span>value</span>.</p>

   <p>The <code id="password-state-(type=password):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="password-state-(type=password):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="password-state-(type=password):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="password-state-(type=password):do-not-apply">do not
   apply</a> to the element:
   <code id="password-state-(type=password):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="password-state-(type=password):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="password-state-(type=password):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="password-state-(type=password):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="password-state-(type=password):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="password-state-(type=password):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="password-state-(type=password):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="password-state-(type=password):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="password-state-(type=password):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="password-state-(type=password):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="password-state-(type=password):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="password-state-(type=password):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="password-state-(type=password):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="password-state-(type=password):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="password-state-(type=password):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="password-state-(type=password):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="password-state-(type=password):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="password-state-(type=password):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="password-state-(type=password):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="password-state-(type=password):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="password-state-(type=password):do-not-apply-2">do not apply</a> to the
   element:
   <code id="password-state-(type=password):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="password-state-(type=password):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="password-state-(type=password):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="password-state-(type=password):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="password-state-(type=password):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="password-state-(type=password):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="password-state-(type=password):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="date-state-(type=date)"><span class=secno>4.10.5.1.7</span> <dfn data-dfn-for=input data-dfn-type=element-state>Date</dfn> state (<code>type=date</code>)<a href="#date-state-(type=date)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date title="<input> elements of type=&quot;date&quot; create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.">Element/input/date</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>57+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>The <code id="date-state-(type=date):the-input-element"><a href=#the-input-element>input</a></code> element <a id="date-state-(type=date):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="date-state-(type=date):concept-fe-value">value</a> to a string representing a specific <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date">date</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls.</p>

  <p>The <code id="date-state-(type=date):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="date-state-(type=date):valid-date-string" href=common-microsyntaxes.html#valid-date-string>valid date string</a>.</p> 

  

  <p>The <code id="date-state-(type=date):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="date-state-(type=date):valid-date-string-2" href=common-microsyntaxes.html#valid-date-string>valid date string</a>. The <code id="date-state-(type=date):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if
  specified, must have a value that is a <a id="date-state-(type=date):valid-date-string-3" href=common-microsyntaxes.html#valid-date-string>valid date string</a>.</p>

  <p>The <code id="date-state-(type=date):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in days.  The <span>default step</span> is 1 day.</p>

  

  <div id=only-contemporary-times class=note><a href=#only-contemporary-times class=self-link></a>

   <p>The <a href="#date-state-(type=date)" id="date-state-(type=date):date-state-(type=date)">Date</a> state (and other date- and time-related
   states described in subsequent sections) is not intended for the entry of values for which a
   precise date and time relative to the contemporary calendar cannot be established. For example,
   it would be inappropriate for the entry of times like "one millisecond after the big bang", "the
   early part of the Jurassic period", or "a winter around 250 BCE".</p>

   <p>For the input of dates before the introduction of the Gregorian calendar, authors are
   encouraged to not use the <a href="#date-state-(type=date)" id="date-state-(type=date):date-state-(type=date)-2">Date</a> state (and the other
   date- and time-related states described in subsequent sections), as user agents are not required
   to support converting dates and times from earlier periods to the Gregorian calendar, and asking
   users to do so manually puts an undue burden on users. (This is complicated by the manner in
   which the Gregorian calendar was phased in, which occurred at different times in different
   countries, ranging from partway through the 16th century all the way to early in the 20th.)
   Instead, authors are encouraged to provide fine-grained input controls using the
   <code id="date-state-(type=date):the-select-element"><a href=form-elements.html#the-select-element>select</a></code> element and <code id="date-state-(type=date):the-input-element-2"><a href=#the-input-element>input</a></code> elements with the <a href="#number-state-(type=number)" id="date-state-(type=date):number-state-(type=number)">Number</a> state.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code id="date-state-(type=date):the-input-element-3"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="date-state-(type=date):concept-input-apply">apply</a> to the element:
   <code id="date-state-(type=date):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="date-state-(type=date):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="date-state-(type=date):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="date-state-(type=date):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="date-state-(type=date):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="date-state-(type=date):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="date-state-(type=date):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="date-state-(type=date):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="date-state-(type=date):dom-input-value"><a href=#dom-input-value>value</a></code>,
   <code id="date-state-(type=date):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="date-state-(type=date):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="date-state-(type=date):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="date-state-(type=date):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="date-state-(type=date):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="date-state-(type=date):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <span>value</span>.</p>

   <p>The <code id="date-state-(type=date):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="date-state-(type=date):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="date-state-(type=date):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="date-state-(type=date):do-not-apply">do not
   apply</a> to the element:
   <code id="date-state-(type=date):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="date-state-(type=date):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="date-state-(type=date):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="date-state-(type=date):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="date-state-(type=date):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="date-state-(type=date):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="date-state-(type=date):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="date-state-(type=date):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="date-state-(type=date):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="date-state-(type=date):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="date-state-(type=date):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="date-state-(type=date):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="date-state-(type=date):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="date-state-(type=date):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="date-state-(type=date):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="date-state-(type=date):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="date-state-(type=date):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="date-state-(type=date):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="date-state-(type=date):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="date-state-(type=date):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="date-state-(type=date):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="date-state-(type=date):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="date-state-(type=date):do-not-apply-2">do not apply</a> to the
   element:
   <code id="date-state-(type=date):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="date-state-(type=date):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="date-state-(type=date):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id="date-state-(type=date):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code> IDL attributes;
   <code id="date-state-(type=date):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="date-state-(type=date):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id="month-state-(type=month)"><span class=secno>4.10.5.1.8</span> <dfn data-dfn-for=input data-dfn-type=element-state>Month</dfn> state (<code>type=month</code>)<a href="#month-state-(type=month)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month title="<input> elements of type month create input fields that let the user enter a month and year allowing a month and year to be easily entered. The value is a string whose value is in the format &quot;YYYY-MM&quot;, where YYYY is the four-digit year and MM is the month number.">Element/input/month</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>18+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>Yes</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="month-state-(type=month):the-input-element"><a href=#the-input-element>input</a></code> element <a id="month-state-(type=month):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="month-state-(type=month):concept-fe-value">value</a> to a string representing a specific <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month">month</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls.</p>

  <p>The <code id="month-state-(type=month):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="month-state-(type=month):valid-month-string" href=common-microsyntaxes.html#valid-month-string>valid month string</a>.</p> 

  

  <p>The <code id="month-state-(type=month):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="month-state-(type=month):valid-month-string-2" href=common-microsyntaxes.html#valid-month-string>valid month string</a>. The <code id="month-state-(type=month):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if
  specified, must have a value that is a <a id="month-state-(type=month):valid-month-string-3" href=common-microsyntaxes.html#valid-month-string>valid month string</a>.</p>

  <p>The <code id="month-state-(type=month):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in months.  The <span>default step</span> is 1 month.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="month-state-(type=month):the-input-element-2"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="month-state-(type=month):concept-input-apply">apply</a> to the element:
   <code id="month-state-(type=month):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="month-state-(type=month):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="month-state-(type=month):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="month-state-(type=month):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="month-state-(type=month):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="month-state-(type=month):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="month-state-(type=month):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="month-state-(type=month):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="month-state-(type=month):dom-input-value"><a href=#dom-input-value>value</a></code>,
   <code id="month-state-(type=month):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="month-state-(type=month):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="month-state-(type=month):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="month-state-(type=month):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="month-state-(type=month):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="month-state-(type=month):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <span>value</span>.</p>

   <p>The <code id="month-state-(type=month):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="month-state-(type=month):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="month-state-(type=month):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="month-state-(type=month):do-not-apply">do not
   apply</a> to the element:
   <code id="month-state-(type=month):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="month-state-(type=month):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="month-state-(type=month):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="month-state-(type=month):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="month-state-(type=month):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="month-state-(type=month):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="month-state-(type=month):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="month-state-(type=month):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="month-state-(type=month):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="month-state-(type=month):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="month-state-(type=month):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="month-state-(type=month):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="month-state-(type=month):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="month-state-(type=month):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="month-state-(type=month):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="month-state-(type=month):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="month-state-(type=month):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="month-state-(type=month):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="month-state-(type=month):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="month-state-(type=month):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="month-state-(type=month):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="month-state-(type=month):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="month-state-(type=month):do-not-apply-2">do not apply</a> to the
   element:
   <code id="month-state-(type=month):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="month-state-(type=month):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="month-state-(type=month):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="month-state-(type=month):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id="month-state-(type=month):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code> IDL attributes;
   <code id="month-state-(type=month):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="month-state-(type=month):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id="week-state-(type=week)"><span class=secno>4.10.5.1.9</span> <dfn data-dfn-for=input data-dfn-type=element-state>Week</dfn> state (<code>type=week</code>)<a href="#week-state-(type=week)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week title="<input> elements of type week create input fields allowing easy entry of a year plus the ISO 8601 week number during that year (i.e., week 1 to 52 or 53).">Element/input/week</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>18+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="week-state-(type=week):the-input-element"><a href=#the-input-element>input</a></code> element <a id="week-state-(type=week):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="week-state-(type=week):concept-fe-value">value</a> to a string representing a specific <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week">week</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls.</p>

  <p>The <code id="week-state-(type=week):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="week-state-(type=week):valid-week-string" href=common-microsyntaxes.html#valid-week-string>valid week string</a>.</p> 

  

  <p>The <code id="week-state-(type=week):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="week-state-(type=week):valid-week-string-2" href=common-microsyntaxes.html#valid-week-string>valid week string</a>. The <code id="week-state-(type=week):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if
  specified, must have a value that is a <a id="week-state-(type=week):valid-week-string-3" href=common-microsyntaxes.html#valid-week-string>valid week string</a>.</p>

  <p>The <code id="week-state-(type=week):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in weeks.  The <span>default step</span> is 1 week. </p>

  

  <div class=bookkeeping>

   <p>The following common <code id="week-state-(type=week):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes, IDL attributes, and
   methods <a href=#concept-input-apply id="week-state-(type=week):concept-input-apply">apply</a> to the element:
   <code id="week-state-(type=week):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="week-state-(type=week):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="week-state-(type=week):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="week-state-(type=week):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="week-state-(type=week):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="week-state-(type=week):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="week-state-(type=week):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="week-state-(type=week):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="week-state-(type=week):dom-input-value"><a href=#dom-input-value>value</a></code>,
   <code id="week-state-(type=week):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="week-state-(type=week):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="week-state-(type=week):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="week-state-(type=week):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="week-state-(type=week):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="week-state-(type=week):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>value</span>.</p>

   <p>The <code id="week-state-(type=week):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="week-state-(type=week):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="week-state-(type=week):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="week-state-(type=week):do-not-apply">do not apply</a> to the
   element:
   <code id="week-state-(type=week):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="week-state-(type=week):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="week-state-(type=week):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="week-state-(type=week):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="week-state-(type=week):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="week-state-(type=week):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="week-state-(type=week):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="week-state-(type=week):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="week-state-(type=week):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="week-state-(type=week):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="week-state-(type=week):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="week-state-(type=week):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="week-state-(type=week):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="week-state-(type=week):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="week-state-(type=week):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="week-state-(type=week):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="week-state-(type=week):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="week-state-(type=week):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="week-state-(type=week):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="week-state-(type=week):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="week-state-(type=week):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="week-state-(type=week):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="week-state-(type=week):do-not-apply-2">do not apply</a> to the element:
   <code id="week-state-(type=week):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="week-state-(type=week):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="week-state-(type=week):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="week-state-(type=week):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id="week-state-(type=week):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code> IDL attributes;
   <code id="week-state-(type=week):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="week-state-(type=week):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id="time-state-(type=time)"><span class=secno>4.10.5.1.10</span> <dfn data-dfn-for=input data-dfn-type=element-state>Time</dfn> state (<code>type=time</code>)<a href="#time-state-(type=time)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time title="<input> elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).">Element/input/time</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>57+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>10+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  

  <p>The <code id="time-state-(type=time):the-input-element"><a href=#the-input-element>input</a></code> element <a id="time-state-(type=time):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="time-state-(type=time):concept-fe-value">value</a> to a string representing a specific <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time">time</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls.</p>

  <p>The <code id="time-state-(type=time):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="time-state-(type=time):valid-time-string" href=common-microsyntaxes.html#valid-time-string>valid time string</a>.</p> 

  

  <p>The <code id="time-state-(type=time):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="time-state-(type=time):valid-time-string-2" href=common-microsyntaxes.html#valid-time-string>valid time string</a>. The <code id="time-state-(type=time):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if
  specified, must have a value that is a <a id="time-state-(type=time):valid-time-string-3" href=common-microsyntaxes.html#valid-time-string>valid time string</a>.</p>

  <p>The <code id="time-state-(type=time):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in seconds.  The <span>default step</span> is 60 seconds.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="time-state-(type=time):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes, IDL attributes, and
   methods <a href=#concept-input-apply id="time-state-(type=time):concept-input-apply">apply</a> to the element:
   <code id="time-state-(type=time):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="time-state-(type=time):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="time-state-(type=time):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="time-state-(type=time):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="time-state-(type=time):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="time-state-(type=time):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="time-state-(type=time):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="time-state-(type=time):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="time-state-(type=time):dom-input-value"><a href=#dom-input-value>value</a></code>,
   <code id="time-state-(type=time):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="time-state-(type=time):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="time-state-(type=time):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="time-state-(type=time):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="time-state-(type=time):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="time-state-(type=time):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>value</span>.</p>

   <p>The <code id="time-state-(type=time):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="time-state-(type=time):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="time-state-(type=time):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="time-state-(type=time):do-not-apply">do not apply</a> to the
   element:
   <code id="time-state-(type=time):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="time-state-(type=time):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="time-state-(type=time):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="time-state-(type=time):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="time-state-(type=time):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="time-state-(type=time):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="time-state-(type=time):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="time-state-(type=time):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="time-state-(type=time):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="time-state-(type=time):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="time-state-(type=time):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="time-state-(type=time):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="time-state-(type=time):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="time-state-(type=time):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="time-state-(type=time):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="time-state-(type=time):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="time-state-(type=time):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="time-state-(type=time):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="time-state-(type=time):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="time-state-(type=time):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="time-state-(type=time):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="time-state-(type=time):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="time-state-(type=time):do-not-apply-2">do not apply</a> to the element:
   <code id="time-state-(type=time):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="time-state-(type=time):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="time-state-(type=time):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="time-state-(type=time):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id="time-state-(type=time):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code> IDL attributes;
   <code id="time-state-(type=time):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="time-state-(type=time):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id="local-date-and-time-state-(type=datetime-local)"><span class=secno>4.10.5.1.11</span> <dfn data-dfn-for=input data-dfn-type=element-state>Local Date and Time</dfn> state (<code>type=datetime-local</code>)<a href="#local-date-and-time-state-(type=datetime-local)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local title="<input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.">Element/input/datetime-local</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>93+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>The <code id="local-date-and-time-state-(type=datetime-local):the-input-element"><a href=#the-input-element>input</a></code> element <a id="local-date-and-time-state-(type=datetime-local):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="local-date-and-time-state-(type=datetime-local):concept-fe-value">value</a> to a string representing a <a href=common-microsyntaxes.html#concept-datetime-local id="local-date-and-time-state-(type=datetime-local):concept-datetime-local">local date and time</a>, with no time-zone offset
  information.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls.</p>

  <p>The <code id="local-date-and-time-state-(type=datetime-local):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="local-date-and-time-state-(type=datetime-local):valid-local-date-and-time-string" href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time string</a>.</p> 

  

  <p>The <code id="local-date-and-time-state-(type=datetime-local):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="local-date-and-time-state-(type=datetime-local):valid-local-date-and-time-string-2" href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time string</a>. The <code id="local-date-and-time-state-(type=datetime-local):attr-input-max"><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a id="local-date-and-time-state-(type=datetime-local):valid-local-date-and-time-string-3" href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time
  string</a>.</p>

  <p>The <code id="local-date-and-time-state-(type=datetime-local):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in seconds.  The <span>default step</span> is 60 seconds.</p>

  

  <p class=note>See <a href=#only-contemporary-times>the note on historical dates</a> in the
  <a href="#date-state-(type=date)" id="local-date-and-time-state-(type=datetime-local):date-state-(type=date)">Date</a> state section.</p>

  <div class=bookkeeping>

   <p>The following common <code id="local-date-and-time-state-(type=datetime-local):the-input-element-2"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="local-date-and-time-state-(type=datetime-local):concept-input-apply">apply</a> to the element:
   <code id="local-date-and-time-state-(type=datetime-local):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-value"><a href=#dom-input-value>value</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="local-date-and-time-state-(type=datetime-local):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <span>value</span>.</p>

   <p>The <code id="local-date-and-time-state-(type=datetime-local):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="local-date-and-time-state-(type=datetime-local):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="local-date-and-time-state-(type=datetime-local):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="local-date-and-time-state-(type=datetime-local):do-not-apply">do not
   apply</a> to the element:
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="local-date-and-time-state-(type=datetime-local):do-not-apply-2">do not apply</a> to the
   element:
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>The following example shows part of a flight booking application. The application uses an
   <code id="local-date-and-time-state-(type=datetime-local):the-input-element-3"><a href=#the-input-element>input</a></code> element with its <code id="local-date-and-time-state-(type=datetime-local):attr-input-type"><a href=#attr-input-type>type</a></code> attribute set to
   <code id="local-date-and-time-state-(type=datetime-local):local-date-and-time-state-(type=datetime-local)"><a href="#local-date-and-time-state-(type=datetime-local)">datetime-local</a></code>, and it then interprets the
   given date and time in the time zone of the selected airport.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Destination<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Airport: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>to</c-> <c- e>list</c-><c- o>=</c-><c- s>airports</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Departure time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>datetime-local</c-> <c- e>name</c-><c- o>=</c-><c- s>totime</c-> <c- e>step</c-><c- o>=</c-><c- s>3600</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>airports</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>ATL</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Atlanta&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>MEM</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Memphis&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>LHR</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;London Heathrow&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>LAX</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Los Angeles&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>FRA</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Frankfurt&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h6 id="number-state-(type=number)"><span class=secno>4.10.5.1.12</span> <dfn data-dfn-type=element-state data-dfn-for=input id=number-state>Number</dfn> state (<code>type=number</code>)<a href="#number-state-(type=number)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number title="<input> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.">Element/input/number</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>29+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>7+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="number-state-(type=number):the-input-element"><a href=#the-input-element>input</a></code> element <a id="number-state-(type=number):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="number-state-(type=number):concept-fe-value">value</a> to a string representing a number.</p>

  

  <p class=note>This specification does not define what user interface user agents are to use;
  user agent vendors are encouraged to consider what would best serve their users' needs. For
  example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input
  (converting it to the format required for submission as described above). Similarly, a user agent
  designed for Romans might display the value in Roman numerals rather than in decimal; or (more
  realistically) a user agent designed for the French market might display the value with
  apostrophes between thousands and commas before the decimals, and allow the user to enter a value
  in that manner, internally converting it to the submission format described above.</p>

  <p>The <code id="number-state-(type=number):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="number-state-(type=number):valid-floating-point-number" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>.</p> 

  

  <p>The <code id="number-state-(type=number):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="number-state-(type=number):valid-floating-point-number-2" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>. The <code id="number-state-(type=number):attr-input-max"><a href=#attr-input-max>max</a></code> attribute,
  if specified, must have a value that is a <a id="number-state-(type=number):valid-floating-point-number-3" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>.</p>

  <p> The <span>default step</span> is 1 (allowing only
  integers to be selected by the user, unless the <span>step
  base</span> has a non-integer value).</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="number-state-(type=number):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes, IDL attributes, and
   methods <a href=#concept-input-apply id="number-state-(type=number):concept-input-apply">apply</a> to the element:
   <code id="number-state-(type=number):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="number-state-(type=number):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="number-state-(type=number):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="number-state-(type=number):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="number-state-(type=number):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="number-state-(type=number):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="number-state-(type=number):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="number-state-(type=number):attr-input-step"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="number-state-(type=number):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="number-state-(type=number):dom-input-value"><a href=#dom-input-value>value</a></code>, and
   <code id="number-state-(type=number):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="number-state-(type=number):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="number-state-(type=number):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="number-state-(type=number):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="number-state-(type=number):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>value</span>.</p>

   <p>The <code id="number-state-(type=number):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="number-state-(type=number):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="number-state-(type=number):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="number-state-(type=number):do-not-apply">do not apply</a> to the
   element:
   <code id="number-state-(type=number):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="number-state-(type=number):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="number-state-(type=number):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="number-state-(type=number):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="number-state-(type=number):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="number-state-(type=number):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="number-state-(type=number):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="number-state-(type=number):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="number-state-(type=number):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="number-state-(type=number):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="number-state-(type=number):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="number-state-(type=number):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="number-state-(type=number):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="number-state-(type=number):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="number-state-(type=number):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="number-state-(type=number):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="number-state-(type=number):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="number-state-(type=number):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="number-state-(type=number):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="number-state-(type=number):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="number-state-(type=number):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="number-state-(type=number):do-not-apply-2">do not apply</a> to the element:
   <code id="number-state-(type=number):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="number-state-(type=number):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="number-state-(type=number):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="number-state-(type=number):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="number-state-(type=number):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="number-state-(type=number):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code id="number-state-(type=number):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="number-state-(type=number):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>Here is an example of using a numeric input control:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->How much do you want to charge? $<c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>step</c-><c- o>=</c-><c- s>0.01</c-> <c- e>name</c-><c- o>=</c-><c- s>price</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

   <p>As described above, a user agent might support numeric input in the user's local format,
   converting it to the format required for submission as described above. This might include
   handling grouping separators (as in "872,000,000,000") and various decimal separators (such as
   "3,99" vs "3.99") or using local digits (such as those in Arabic, Devanagari, Persian, and
   Thai).</p>

  </div>

  <p id=when-number-is-not-appropriate class=note><a href=#when-number-is-not-appropriate class=self-link></a>The <code>type=number</code> state
  is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a
  number. For example, it would be inappropriate for credit card numbers or US postal codes. A
  simple way of determining whether to use <code>type=number</code> is to consider whether
  it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down"
  arrows). Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as
  wrong as getting every digit incorrect. So it would not make sense for the user to select a credit
  card number using "up" and "down" buttons. When a spinbox interface is not appropriate, <code>type=text</code> is probably the right choice (possibly with an <code id="number-state-(type=number):attr-inputmode"><a href=interaction.html#attr-inputmode>inputmode</a></code> or <code id="number-state-(type=number):attr-input-pattern-2"><a href=#attr-input-pattern>pattern</a></code>
  attribute).</p>



  <h6 id="range-state-(type=range)"><span class=secno>4.10.5.1.13</span> <dfn data-dfn-for=input data-dfn-type=element-state>Range</dfn> state (<code>type=range</code>)<a href="#range-state-(type=range)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range title="<input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type.">Element/input/range</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>23+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>52+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>57+</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>The <code id="range-state-(type=range):the-input-element"><a href=#the-input-element>input</a></code> element <a id="range-state-(type=range):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value">value</a> to a string representing a number, but with the
  caveat that the exact value is not important, letting UAs provide a simpler interface than they
  do for the <a href="#number-state-(type=number)" id="range-state-(type=range):number-state-(type=number)">Number</a> state.</p>

  

  <p>The <code id="range-state-(type=range):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value
  that is a <a id="range-state-(type=range):valid-floating-point-number" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>.</p> 

  

  <p>The <dfn id=concept-input-value-default-range>default value</dfn> is the <span>minimum</span> plus half the difference between the <span>minimum</span> and the <span>maximum</span>, unless the <span>maximum</span> is less than the <span>minimum</span>, in which case the <a href=#concept-input-value-default-range id="range-state-(type=range):concept-input-value-default-range">default value</a> is the <span>minimum</span>.</p>

  

  <div class=example>

   <p>Here is an example of a range control using an autocomplete list with the <code id="range-state-(type=range):attr-input-list"><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along
   the full range of the control that are especially important, such as preconfigured light levels
   or typical speed limits in a range control used as a speed control. The following markup
   fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;range&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;-100&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;100&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;10&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;power&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;powers&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;powers&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;-30&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;30&quot;</c-><c- p>&gt;</c->
<span class='bad'> <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;++50&quot;</c-><c- p>&gt;</c-></span>
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>...with the following style sheet applied:</p>

   <pre><code class='css'><c- f>input </c-><c- p>{</c-> <c- k>writing-mode</c-><c- p>:</c-> vertical-lr<c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- m>75</c-><c- l>px</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>49</c-><c- l>px</c-><c- p>;</c-> <c- k>background</c-><c- p>:</c-> #D5CCBB<c- p>;</c-> <c- k>color</c-><c- p>:</c-> black<c- p>;</c-> <c- p>}</c-></code></pre>

   <p>...might render as:</p>

   <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." src=../images/sample-range.png width=49 height=75>

   <p>Note how the UA determined the orientation of the control from the ratio of the
   style-sheet-specified height and width properties. The colors were similarly derived from the
   style sheet. The tick marks, however, were derived from the markup. In particular, the <code id="range-state-(type=range):attr-input-step"><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks,
   the UA deciding to only use the author-specified completion values and then adding longer tick
   marks at the extremes.</p>

   <p>Note also how the invalid value <code>++50</code> was ignored.</p>

  </div>

  <div class=example>

   <p>For another example, consider the following markup fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>x</c-> <c- e>type</c-><c- o>=</c-><c- s>range</c-> <c- e>min</c-><c- o>=</c-><c- s>100</c-> <c- e>max</c-><c- o>=</c-><c- s>700</c-> <c- e>step</c-><c- o>=</c-><c- s>9.09090909</c-> <c- e>value</c-><c- o>=</c-><c- s>509.090909</c-><c- p>&gt;</c-></code></pre>

   <p>A user agent could display in a variety of ways, for instance:</p>

   <p><img alt="As a dial." src=../images/sample-range-2a.png width=231 height=57></p>

   <p>Or, alternatively, for instance:</p>

   <p><img alt="As a long horizontal slider with tick marks." src=../images/sample-range-2b.png width=445 height=56></p>

   <p>The user agent could pick which one to display based on the dimensions given in the style
   sheet. This would allow it to maintain the same resolution for the tick marks, despite the
   differences in width.</p>

  </div>

  <div class=example>

   <p>Finally, here is an example of a range control with two labeled values:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;range&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;a&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;a-values&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;a-values&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;10&quot;</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Low&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;90&quot;</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;High&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>With styles that make the control draw vertically, it might look as follows:</p>

   <p><img alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." src=../images/sample-range-labels.png width=103 height=164>

  </div>

  <p class=note>In this state, the range and step constraints are enforced even during user input,
  and there is no way to set the value to the empty string.</p>

  <p>The <code id="range-state-(type=range):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="range-state-(type=range):valid-floating-point-number-2" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>. The <span>default
  minimum</span> is 0. The <code id="range-state-(type=range):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if specified, must
  have a value that is a <a id="range-state-(type=range):valid-floating-point-number-3" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>. The <span>default maximum</span> is 100.</p>

  <p> The <span>default step</span> is 1 (allowing only
  integers, unless the <code id="range-state-(type=range):attr-input-min-2"><a href=#attr-input-min>min</a></code> attribute has a non-integer
  value).</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="range-state-(type=range):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes, IDL attributes, and
   methods <a href=#concept-input-apply id="range-state-(type=range):concept-input-apply">apply</a> to the element:
   <code id="range-state-(type=range):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="range-state-(type=range):attr-input-list-2"><a href=#attr-input-list>list</a></code>,
   <code id="range-state-(type=range):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="range-state-(type=range):attr-input-min-3"><a href=#attr-input-min>min</a></code>, and
   <code id="range-state-(type=range):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="range-state-(type=range):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="range-state-(type=range):dom-input-value"><a href=#dom-input-value>value</a></code>, and
   <code id="range-state-(type=range):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="range-state-(type=range):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="range-state-(type=range):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="range-state-(type=range):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>value</span>.</p>

   <p>The <code id="range-state-(type=range):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="range-state-(type=range):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="range-state-(type=range):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="range-state-(type=range):do-not-apply">do not apply</a> to the
   element:
   <code id="range-state-(type=range):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="range-state-(type=range):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="range-state-(type=range):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="range-state-(type=range):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="range-state-(type=range):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="range-state-(type=range):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="range-state-(type=range):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="range-state-(type=range):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="range-state-(type=range):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="range-state-(type=range):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="range-state-(type=range):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="range-state-(type=range):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="range-state-(type=range):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="range-state-(type=range):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="range-state-(type=range):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="range-state-(type=range):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="range-state-(type=range):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="range-state-(type=range):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="range-state-(type=range):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="range-state-(type=range):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="range-state-(type=range):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="range-state-(type=range):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="range-state-(type=range):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="range-state-(type=range):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="range-state-(type=range):do-not-apply-2">do not apply</a> to the element:
   <code id="range-state-(type=range):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="range-state-(type=range):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="range-state-(type=range):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="range-state-(type=range):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="range-state-(type=range):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="range-state-(type=range):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code id="range-state-(type=range):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="range-state-(type=range):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="range-state-(type=range):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>



  <h6 id="color-state-(type=color)"><span class=secno>4.10.5.1.14</span> <dfn data-dfn-for=input data-dfn-type=element-state>Color</dfn> state (<code>type=color</code>)<a href="#color-state-(type=color)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color title="<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.">Element/input/color</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>29+</span></span><span class="safari yes"><span>Safari</span><span>12.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span title="Partial implementation.">🔰 27+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div>

  

  <p>The <code id="color-state-(type=color):the-input-element"><a href=#the-input-element>input</a></code> element <a id="color-state-(type=color):represents" href=dom.html#represents>represents</a> a color well control, for setting the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="color-state-(type=color):concept-fe-value">value</a> to a string representing the serialization
  of a CSS color.</p>

  <p class=note>In this state, there is always a CSS color picked, and there is no way for the end
  user to set the value to the empty string.</p>

  <p>The <dfn data-dfn-for=input id=attr-input-alpha data-dfn-type=element-attr><code>alpha</code></dfn> attribute
  is a <a id="color-state-(type=color):boolean-attribute" href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. If present, it indicates the CSS color's alpha component can
  be manipulated by the end user and does not have to be fully opaque.</p>

  <p>The <dfn data-dfn-for=input id=attr-input-colorspace data-dfn-type=element-attr><code>colorspace</code></dfn>
  attribute indicates the color space of the serialized CSS color. It also hints at the desired user
  interface for selecting a CSS color. It is an <a id="color-state-(type=color):enumerated-attribute" href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following
  keywords and states:</p>

  <table><thead><tr><th> Keyword
     <th> State
     <th> Brief description
   <tbody><tr><td><dfn data-dfn-for=input/colorspace id=attr-input-colorspace-limited-srgb data-dfn-type=attr-value><code>limited-srgb</code></dfn>
     <td><dfn id=attr-input-colorspace-limited-srgb-state>Limited sRGB</dfn>
     <td>The CSS color is converted to the <a id="color-state-(type=color):'srgb'" href=https://drafts.csswg.org/css-color/#valdef-color-srgb data-x-internal="'srgb'">'srgb'</a> color space and limited to 8-bits per
     component, e.g., "<code>#123456</code>" or "<code>color(srgb 0 1 0 / 0.5)</code>".
    <tr><td><dfn data-dfn-for=input/colorspace id=attr-input-colorspace-display-p3 data-dfn-type=attr-value><code>display-p3</code></dfn>
     <td><dfn id=attr-input-colorspace-display-p3-state>Display P3</dfn>
     <td>The CSS color is converted to the <a id="color-state-(type=color):'display-p3'" href=https://drafts.csswg.org/css-color/#valdef-color-display-p3 data-x-internal="'display-p3'">'display-p3'</a> color space, e.g., "<code>color(display-p3 1.84 -0.19 0.72 / 0.6)</code>".
  </table>

  <p>The attribute's <i id="color-state-(type=color):missing-value-default"><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id="color-state-(type=color):invalid-value-default"><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-input-colorspace-limited-srgb-state id="color-state-(type=color):attr-input-colorspace-limited-srgb-state">Limited sRGB</a> state.</p>

  

  <p>The <code id="color-state-(type=color):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not the empty
  string, must have a value that is a CSS color.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="color-state-(type=color):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="color-state-(type=color):concept-input-apply">apply</a> to the element:
   <code id="color-state-(type=color):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="color-state-(type=color):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="color-state-(type=color):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>, and
   <code id="color-state-(type=color):attr-input-list"><a href=#attr-input-list>list</a></code> content attributes;
   <code id="color-state-(type=color):dom-input-list"><a href=#dom-input-list>list</a></code> and
   <code id="color-state-(type=color):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="color-state-(type=color):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method.</p>

   <p>The <code id="color-state-(type=color):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>value</span>.</p>

   <p>The <code id="color-state-(type=color):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="color-state-(type=color):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="color-state-(type=color):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="color-state-(type=color):do-not-apply">do not apply</a> to the
   element:
   <code id="color-state-(type=color):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="color-state-(type=color):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="color-state-(type=color):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="color-state-(type=color):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="color-state-(type=color):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="color-state-(type=color):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="color-state-(type=color):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="color-state-(type=color):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="color-state-(type=color):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="color-state-(type=color):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="color-state-(type=color):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="color-state-(type=color):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="color-state-(type=color):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="color-state-(type=color):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="color-state-(type=color):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="color-state-(type=color):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="color-state-(type=color):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="color-state-(type=color):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="color-state-(type=color):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="color-state-(type=color):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="color-state-(type=color):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="color-state-(type=color):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="color-state-(type=color):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="color-state-(type=color):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="color-state-(type=color):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="color-state-(type=color):do-not-apply-2">do not apply</a> to the element:
   <code id="color-state-(type=color):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="color-state-(type=color):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="color-state-(type=color):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="color-state-(type=color):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="color-state-(type=color):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="color-state-(type=color):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code> and,
   <code id="color-state-(type=color):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="color-state-(type=color):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="color-state-(type=color):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="color-state-(type=color):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="color-state-(type=color):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="checkbox-state-(type=checkbox)"><span class=secno>4.10.5.1.15</span> <dfn data-dfn-for=input data-dfn-type=element-state>Checkbox</dfn> state (<code>type=checkbox</code>)<a href="#checkbox-state-(type=checkbox)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox title="<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).">Element/input/checkbox</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="checkbox-state-(type=checkbox):the-input-element"><a href=#the-input-element>input</a></code> element <a id="checkbox-state-(type=checkbox):represents" href=dom.html#represents>represents</a> a two-state control that represents the
  element's <a href=form-control-infrastructure.html#concept-fe-checked id="checkbox-state-(type=checkbox):concept-fe-checked">checkedness</a> state. If the element's <a href=form-control-infrastructure.html#concept-fe-checked id="checkbox-state-(type=checkbox):concept-fe-checked-2">checkedness</a> state is true, the control represents a positive
  selection, and if it is false, a negative selection. If the element's <code id="checkbox-state-(type=checkbox):dom-input-indeterminate"><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute is set to true, then the
  control's selection should be obscured as if the control was in a third, indeterminate, state.</p>

  <p class=note>The control is never a true tri-state control, even if the element's <code id="checkbox-state-(type=checkbox):dom-input-indeterminate-2"><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute is set to true. The <code id="checkbox-state-(type=checkbox):dom-input-indeterminate-3"><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute only gives the appearance of a
  third state.</p>

  

  <dl class=domintro><dt><code><var>input</var>.<span id=dom-input-indeterminate>indeterminate</span> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate title="The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements.">HTMLInputElement#indeterminate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=indeterminate-checkbox" title="indeterminate checkbox">caniuse.com table</a></span></span></div></div></div><dd>
    <p>When set, overrides the rendering of <a href="#checkbox-state-(type=checkbox)" id="checkbox-state-(type=checkbox):checkbox-state-(type=checkbox)">checkbox</a>
    controls so that the current value is not visible.</p>
   </dl>

  <div class=bookkeeping>

   <p>The following common <code id="checkbox-state-(type=checkbox):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="checkbox-state-(type=checkbox):concept-input-apply">apply</a> to the element:
   <code id="checkbox-state-(type=checkbox):attr-input-checked"><a href=#attr-input-checked>checked</a></code>, and
   <code id="checkbox-state-(type=checkbox):attr-input-required"><a href=#attr-input-required>required</a></code> content attributes;
   <code id="checkbox-state-(type=checkbox):dom-input-checked"><a href=#dom-input-checked>checked</a></code> and
   <code id="checkbox-state-(type=checkbox):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes.</p>

   <p>The <code id="checkbox-state-(type=checkbox):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>default/on</span>.</p>

   <p>The <code id="checkbox-state-(type=checkbox):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="checkbox-state-(type=checkbox):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="checkbox-state-(type=checkbox):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="checkbox-state-(type=checkbox):do-not-apply">do not apply</a> to the
   element:
   <code id="checkbox-state-(type=checkbox):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="checkbox-state-(type=checkbox):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="checkbox-state-(type=checkbox):do-not-apply-2">do not apply</a> to the element:
   <code id="checkbox-state-(type=checkbox):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="checkbox-state-(type=checkbox):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="checkbox-state-(type=checkbox):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>



  <h6 id="radio-button-state-(type=radio)"><span class=secno>4.10.5.1.16</span> <dfn data-dfn-for=input data-dfn-type=element-state>Radio Button</dfn> state (<code>type=radio</code>)<a href="#radio-button-state-(type=radio)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio title="<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.">Element/input/radio</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="radio-button-state-(type=radio):the-input-element"><a href=#the-input-element>input</a></code> element <a id="radio-button-state-(type=radio):represents" href=dom.html#represents>represents</a> a control that, when used in conjunction
  with other <code id="radio-button-state-(type=radio):the-input-element-2"><a href=#the-input-element>input</a></code> elements, forms a <i id="radio-button-state-(type=radio):radio-button-group"><a href=#radio-button-group>radio button group</a></i> in which only one
  control can have its <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked">checkedness</a> state set to true. If
  the element's <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked-2">checkedness</a> state is true, the control
  represents the selected control in the group, and if it is false, it indicates a control in the
  group that is not selected.</p>

  <p>The <dfn id=radio-button-group><i>radio button group</i></dfn> that contains an <code id="radio-button-state-(type=radio):the-input-element-3"><a href=#the-input-element>input</a></code> element
  <var>a</var> also contains all the other <code id="radio-button-state-(type=radio):the-input-element-4"><a href=#the-input-element>input</a></code> elements <var>b</var> that fulfill all
  of the following conditions:</p>

  <ul><li>The <code id="radio-button-state-(type=radio):the-input-element-5"><a href=#the-input-element>input</a></code> element <var>b</var>'s <code id="radio-button-state-(type=radio):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in the <a href="#radio-button-state-(type=radio)" id="radio-button-state-(type=radio):radio-button-state-(type=radio)">Radio
   Button</a> state.<li>Either <var>a</var> and <var>b</var> have the same <a id="radio-button-state-(type=radio):form-owner" href=form-control-infrastructure.html#form-owner>form owner</a>,
   or they both have no <a id="radio-button-state-(type=radio):form-owner-2" href=form-control-infrastructure.html#form-owner>form owner</a>.<li>Both <var>a</var> and <var>b</var> are in the same <a id="radio-button-state-(type=radio):tree" href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.<li>They both have a <code id="radio-button-state-(type=radio):attr-fe-name"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute, their <code id="radio-button-state-(type=radio):attr-fe-name-2"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attributes are not empty, and the value of <var>a</var>'s <code id="radio-button-state-(type=radio):attr-fe-name-3"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute equals the value of <var>b</var>'s <code id="radio-button-state-(type=radio):attr-fe-name-4"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute.</ul>

  <p>A <a id="radio-button-state-(type=radio):tree-2" href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> must not contain an <code id="radio-button-state-(type=radio):the-input-element-6"><a href=#the-input-element>input</a></code> element whose <i id="radio-button-state-(type=radio):radio-button-group-2"><a href=#radio-button-group>radio button group</a></i> contains only that element.</p>

  

  <p class=note>If none of the radio buttons in a <a href=#radio-button-group id="radio-button-state-(type=radio):radio-button-group-3">radio button group</a> are checked,
  then they will all be initially unchecked in the interface, until such time as one of them is
  checked (either by the user or by script).</p>

  <div class=bookkeeping>

   <p>The following common <code id="radio-button-state-(type=radio):the-input-element-7"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="radio-button-state-(type=radio):concept-input-apply">apply</a> to the element:
   <code id="radio-button-state-(type=radio):attr-input-checked"><a href=#attr-input-checked>checked</a></code> and
   <code id="radio-button-state-(type=radio):attr-input-required"><a href=#attr-input-required>required</a></code> content attributes;
   <code id="radio-button-state-(type=radio):dom-input-checked"><a href=#dom-input-checked>checked</a></code> and
   <code id="radio-button-state-(type=radio):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes.</p>

   <p>The <code id="radio-button-state-(type=radio):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>default/on</span>.</p>

   <p>The <code id="radio-button-state-(type=radio):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="radio-button-state-(type=radio):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="radio-button-state-(type=radio):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="radio-button-state-(type=radio):do-not-apply">do not apply</a> to the
   element:
   <code id="radio-button-state-(type=radio):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="radio-button-state-(type=radio):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="radio-button-state-(type=radio):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="radio-button-state-(type=radio):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="radio-button-state-(type=radio):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="radio-button-state-(type=radio):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="radio-button-state-(type=radio):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="radio-button-state-(type=radio):do-not-apply-2">do not apply</a> to the element:
   <code id="radio-button-state-(type=radio):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="radio-button-state-(type=radio):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="radio-button-state-(type=radio):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="radio-button-state-(type=radio):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="radio-button-state-(type=radio):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="radio-button-state-(type=radio):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="radio-button-state-(type=radio):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>



  <h6 id="file-upload-state-(type=file)"><span class=secno>4.10.5.1.17</span> <dfn data-dfn-for=input data-dfn-type=element-state>File Upload</dfn> state (<code>type=file</code>)<a href="#file-upload-state-(type=file)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file title="<input> elements with type=&quot;file&quot; let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.">Element/input/file</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  

  <p>The <code id="file-upload-state-(type=file):the-input-element"><a href=#the-input-element>input</a></code> element <a id="file-upload-state-(type=file):represents" href=dom.html#represents>represents</a> a list of <dfn id=concept-input-type-file-selected>selected files</dfn>, each file consisting of a
  filename, a file type, and a file body (the contents of the file).</p>

  

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept title="The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.">Attributes/accept</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-accept</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>37+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>26+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>37+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>11.3+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>26+</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.5+</span></span><span class="opera_android yes"><span>Opera Android</span><span>15+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-accept data-dfn-type=element-attr><code>accept</code></dfn>
  attribute may be specified to provide user agents with a hint of what file types will be
  accepted.</p>

  <p>If specified, the attribute must consist of a <a id="file-upload-state-(type=file):set-of-comma-separated-tokens" href=common-microsyntaxes.html#set-of-comma-separated-tokens>set of comma-separated tokens</a>, each
  of which must be an <a id="file-upload-state-(type=file):ascii-case-insensitive" href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following:</p>

  <dl><dt>The string "<code>audio/*</code>"<dd>Indicates that sound files are accepted.<dt>The string "<code>video/*</code>"<dd>Indicates that video files are accepted.<dt>The string "<code>image/*</code>"<dd>Indicates that image files are accepted.<dt>A <a id="file-upload-state-(type=file):valid-mime-type-string-with-no-parameters" href=https://mimesniff.spec.whatwg.org/#valid-mime-type-with-no-parameters data-x-internal=valid-mime-type-string-with-no-parameters>valid MIME type string with no parameters</a><dd>Indicates that files of the specified type are accepted.<dt>A string whose first character is a U+002E FULL STOP character (.)<dd>Indicates that files with the specified file extension are accepted.</dl>

  <p>The tokens must not be <a id="file-upload-state-(type=file):ascii-case-insensitive-2" href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> matches for any of the other tokens
  (i.e. duplicates are not allowed). </p>

  <p>User agents may use the value of this attribute to display a more appropriate user interface
  than a generic file picker. For instance, given the value <code>image/*</code>, a user
  agent could offer the user the option of using a local camera or selecting a photograph from their
  photo collection; given the value <code>audio/*</code>, a user agent could offer the user
  the option of recording a clip using a headset microphone.</p>

  

  <p class=note>Authors are encouraged to specify both any MIME types and any corresponding
  extensions when looking for data in a specific format.</p>

  <div class=example>

   <p>For example, consider an application that converts Microsoft Word documents to Open Document
   Format files. Since Microsoft Word documents are described with a wide variety of MIME types and
   extensions, the site can list several, as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;file&quot;</c-> <c- e>accept</c-><c- o>=</c-><c- s>&quot;.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>On platforms that only use file extensions to describe file types, the extensions listed here
   can be used to filter the allowed documents, while the MIME types can be used with the system's
   type registration table (mapping MIME types to extensions used by the system), if any, to
   determine any other extensions to allow. Similarly, on a system that does not have filenames or
   extensions but labels documents with MIME types internally, the MIME types can be used to pick
   the allowed files, while the extensions can be used if the system has an extension registration
   table that maps known extensions to MIME types used by the system.</p>

  </div>

  <p class=warning>Extensions tend to be ambiguous (e.g. there are an untold number of formats
  that use the "<code>.dat</code>" extension, and users can typically quite easily rename
  their files to have a "<code>.doc</code>" extension even if they are not Microsoft Word
  documents), and MIME types tend to be unreliable (e.g. many formats have no formally registered
  types, and many formats are in practice labeled using a number of different MIME types). Authors
  are reminded that, as usual, data received from a client should be treated with caution, as it may
  not be in an expected format even if the user is not hostile and the user agent fully obeyed the
  <code id="file-upload-state-(type=file):attr-input-accept"><a href=#attr-input-accept>accept</a></code> attribute's requirements.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file title="<input> elements with type=&quot;file&quot; let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.">Element/input/file</a></div></div><div id=fakepath-srsly class=example><a href=#fakepath-srsly class=self-link></a>

   <p>For historical reasons, the <code id="file-upload-state-(type=file):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute prefixes
   the filename with the string "<code>C:\fakepath\</code>". Some legacy user agents
   actually included the full path (which was a security vulnerability). As a result of this,
   obtaining the filename from the <code id="file-upload-state-(type=file):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute in a
   backwards-compatible way is non-trivial. The following function extracts the filename in a
   suitably compatible manner:</p>

   <pre><code class='js'><c- a>function</c-> extractFilename<c- p>(</c->path<c- p>)</c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c->path<c- p>.</c->substr<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>12</c-><c- p>)</c-> <c- o>==</c-> <c- u>&quot;C:\\fakepath\\&quot;</c-><c- p>)</c->
    <c- k>return</c-> path<c- p>.</c->substr<c- p>(</c-><c- mf>12</c-><c- p>);</c-> <c- c1>// modern browser</c->
  <c- a>var</c-> x<c- p>;</c->
  x <c- o>=</c-> path<c- p>.</c->lastIndexOf<c- p>(</c-><c- t>&apos;/&apos;</c-><c- p>);</c->
  <c- k>if</c-> <c- p>(</c->x <c- o>&gt;=</c-> <c- mf>0</c-><c- p>)</c-> <c- c1>// Unix-based path</c->
    <c- k>return</c-> path<c- p>.</c->substr<c- p>(</c->x<c- o>+</c-><c- mf>1</c-><c- p>);</c->
  x <c- o>=</c-> path<c- p>.</c->lastIndexOf<c- p>(</c-><c- t>&apos;\\&apos;</c-><c- p>);</c->
  <c- k>if</c-> <c- p>(</c->x <c- o>&gt;=</c-> <c- mf>0</c-><c- p>)</c-> <c- c1>// Windows-based path</c->
    <c- k>return</c-> path<c- p>.</c->substr<c- p>(</c->x<c- o>+</c-><c- mf>1</c-><c- p>);</c->
  <c- k>return</c-> path<c- p>;</c-> <c- c1>// just the filename</c->
<c- p>}</c-></code></pre>

   <p>This can be used as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>file</c-> <c- e>name</c-><c- o>=</c-><c- s>image</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;updateFilename(this.value)&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The name of the file you picked is: <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;filename&quot;</c-><c- p>&gt;</c->(none)<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> updateFilename<c- p>(</c->path<c- p>)</c-> <c- p>{</c->
   <c- a>var</c-> name <c- o>=</c-> extractFilename<c- p>(</c->path<c- p>);</c->
   document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;filename&apos;</c-><c- p>).</c->textContent <c- o>=</c-> name<c- p>;</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   

  </div>

  <hr>

  <div class=bookkeeping>

   <p>The following common <code id="file-upload-state-(type=file):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="file-upload-state-(type=file):concept-input-apply">apply</a> to the element:
   <code id="file-upload-state-(type=file):attr-input-accept-2"><a href=#attr-input-accept>accept</a></code>,
   <code id="file-upload-state-(type=file):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>, and
   <code id="file-upload-state-(type=file):attr-input-required"><a href=#attr-input-required>required</a></code> content attributes;
   <code id="file-upload-state-(type=file):dom-input-files"><a href=#dom-input-files>files</a></code> and
   <code id="file-upload-state-(type=file):dom-input-value-3"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="file-upload-state-(type=file):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method.</p>

   <p>The <code id="file-upload-state-(type=file):dom-input-value-4"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>filename</span>.</p>

   <p>The <code id="file-upload-state-(type=file):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="file-upload-state-(type=file):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="file-upload-state-(type=file):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="file-upload-state-(type=file):do-not-apply">do not apply</a> to the
   element:
   <code id="file-upload-state-(type=file):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="file-upload-state-(type=file):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="file-upload-state-(type=file):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="file-upload-state-(type=file):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="file-upload-state-(type=file):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="file-upload-state-(type=file):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="file-upload-state-(type=file):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="file-upload-state-(type=file):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="file-upload-state-(type=file):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="file-upload-state-(type=file):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="file-upload-state-(type=file):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="file-upload-state-(type=file):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="file-upload-state-(type=file):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="file-upload-state-(type=file):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="file-upload-state-(type=file):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="file-upload-state-(type=file):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="file-upload-state-(type=file):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="file-upload-state-(type=file):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="file-upload-state-(type=file):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="file-upload-state-(type=file):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="file-upload-state-(type=file):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The element's <code id="file-upload-state-(type=file):attr-input-value"><a href=#attr-input-value>value</a></code> attribute must be omitted.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="file-upload-state-(type=file):do-not-apply-2">do not apply</a> to the element:
   <code id="file-upload-state-(type=file):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="file-upload-state-(type=file):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="file-upload-state-(type=file):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="file-upload-state-(type=file):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="file-upload-state-(type=file):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="file-upload-state-(type=file):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="file-upload-state-(type=file):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="file-upload-state-(type=file):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="file-upload-state-(type=file):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="file-upload-state-(type=file):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="file-upload-state-(type=file):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>



  <h6 id="submit-button-state-(type=submit)"><span class=secno>4.10.5.1.18</span> <dfn data-dfn-for=input data-dfn-type=element-state>Submit Button</dfn> state (<code>type=submit</code>)<a href="#submit-button-state-(type=submit)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit title="<input> elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.">Element/input/submit</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>
  
  The <code id="submit-button-state-(type=submit):the-input-element"><a href=#the-input-element>input</a></code> element <a id="submit-button-state-(type=submit):represents" href=dom.html#represents>represents</a> a button that, when activated, submits the
  form.  The element is
  a <a href=forms.html#concept-button id="submit-button-state-(type=submit):concept-button">button</a>, specifically a <a href=forms.html#concept-submit-button id="submit-button-state-(type=submit):concept-submit-button">submit button</a>.</p>

  <p class=note>Since the default label is <a id="submit-button-state-(type=submit):implementation-defined" href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>, and the width of
  the button typically depends on the button's label, the button's width can leak a few bits of
  fingerprintable information. These bits are likely to be strongly correlated to the identity of
  the user agent and the user's locale.</p>

  

  <p>The <code id="submit-button-state-(type=submit):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>, <code id="submit-button-state-(type=submit):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id="submit-button-state-(type=submit):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id="submit-button-state-(type=submit):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id="submit-button-state-(type=submit):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> attributes are <a id="submit-button-state-(type=submit):attributes-for-form-submission" href=form-control-infrastructure.html#attributes-for-form-submission>attributes for form
  submission</a>.</p>

  <p class=note>The <code id="submit-button-state-(type=submit):attr-fs-formnovalidate-2"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code> attribute can be
  used to make submit buttons that do not trigger the constraint validation.</p>

  <div class=bookkeeping>

   <p>The following common <code id="submit-button-state-(type=submit):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="submit-button-state-(type=submit):concept-input-apply">apply</a> to the element:
   <code id="submit-button-state-(type=submit):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formaction-2"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formenctype-2"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formmethod-2"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formnovalidate-3"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formtarget-2"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="submit-button-state-(type=submit):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>, and
   <code id="submit-button-state-(type=submit):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code> content
   attributes; <code id="submit-button-state-(type=submit):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute.</p>

   <p>The <code id="submit-button-state-(type=submit):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>default</span>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="submit-button-state-(type=submit):do-not-apply">do not apply</a> to the
   element:
   <code id="submit-button-state-(type=submit):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="submit-button-state-(type=submit):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="submit-button-state-(type=submit):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="submit-button-state-(type=submit):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="submit-button-state-(type=submit):do-not-apply-2">do not apply</a> to the element:
   <code id="submit-button-state-(type=submit):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="submit-button-state-(type=submit):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="submit-button-state-(type=submit):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="submit-button-state-(type=submit):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="submit-button-state-(type=submit):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="submit-button-state-(type=submit):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="submit-button-state-(type=submit):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="submit-button-state-(type=submit):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="submit-button-state-(type=submit):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="submit-button-state-(type=submit):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="submit-button-state-(type=submit):do-not-apply-3">do not apply</a>.</p>

  </div>


  <h6 id="image-button-state-(type=image)"><span class=secno>4.10.5.1.19</span> <dfn data-dfn-for=input data-dfn-type=element-state>Image Button</dfn> state (<code>type=image</code>)<a href="#image-button-state-(type=image)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image title="<input> elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.">Element/input/image</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="image-button-state-(type=image):the-input-element"><a href=#the-input-element>input</a></code> element <a id="image-button-state-(type=image):represents" href=dom.html#represents>represents</a> either an image from which a user can
  select a coordinate and submit the form, or alternatively a button from which the user can submit
  the form. The element is a <a href=forms.html#concept-button id="image-button-state-(type=image):concept-button">button</a>, specifically a <a href=forms.html#concept-submit-button id="image-button-state-(type=image):concept-submit-button">submit button</a>.</p>

  <p class=note>The coordinate is sent to the server <span>during form submission</span> by sending two entries for the element, derived from the name
  of the control but with "<code>.x</code>" and "<code>.y</code>" appended to
  the name with the <var>x</var> and <var>y</var> components of the coordinate respectively.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#src</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The image is given by the <dfn data-dfn-for=input id=attr-input-src data-dfn-type=element-attr><code>src</code></dfn> attribute. The <code id="image-button-state-(type=image):attr-input-src"><a href=#attr-input-src>src</a></code>
  attribute must be present, and must contain a <a id="image-button-state-(type=image):valid-non-empty-url-potentially-surrounded-by-spaces" href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a> referencing a non-interactive, optionally animated, image resource that is neither
  paged nor scripted.</p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#alt</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-alt data-dfn-type=element-attr><code>alt</code></dfn> attribute
  provides the textual label for the button for users and user agents who cannot use the image. The
  <code id="image-button-state-(type=image):attr-input-alt"><a href=#attr-input-alt>alt</a></code> attribute must be present, and must contain a non-empty
  string giving the label that would be appropriate for an equivalent button if the image was
  unavailable.</p>

  <p>The <code id="image-button-state-(type=image):the-input-element-2"><a href=#the-input-element>input</a></code> element supports <a id="image-button-state-(type=image):dimension-attributes" href=embedded-content-other.html#dimension-attributes>dimension attributes</a>.</p>

  <hr>

  <p>If the <code id="image-button-state-(type=image):attr-input-src-2"><a href=#attr-input-src>src</a></code> attribute is set, and the image is <i>available</i> and the user agent is configured to display that image,
  then the element <a id="image-button-state-(type=image):represents-2" href=dom.html#represents>represents</a> a control for selecting a <span>coordinate</span> from the image specified by the
  <code id="image-button-state-(type=image):attr-input-src-3"><a href=#attr-input-src>src</a></code> attribute. In that case, if the element is <i id="image-button-state-(type=image):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the user to select this <span>coordinate</span>.</p>

  <p>Otherwise, the element <a id="image-button-state-(type=image):represents-3" href=dom.html#represents>represents</a> a submit button whose label is given by the
  value of the <code id="image-button-state-(type=image):attr-input-alt-2"><a href=#attr-input-alt>alt</a></code> attribute.</p>

  

  <p>The <code id="image-button-state-(type=image):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>, <code id="image-button-state-(type=image):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id="image-button-state-(type=image):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id="image-button-state-(type=image):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id="image-button-state-(type=image):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> attributes are <a id="image-button-state-(type=image):attributes-for-form-submission" href=form-control-infrastructure.html#attributes-for-form-submission>attributes for form
  submission</a>.</p>

  <dl class=domintro><dt><code><var>image</var>.<span id=dom-input-width>width</span> [ = <var>value</var> ]</code><dt><code><var>image</var>.<span id=dom-input-height>height</span> [ = <var>value</var> ]</code><dd>
    <p>These attributes return the actual rendered dimensions of the image, or 0 if the dimensions
    are not known.</p>

    <p>They can be set, to change the corresponding content attributes.</p>
   </dl>

  <div class=bookkeeping>

   <p>The following common <code id="image-button-state-(type=image):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="image-button-state-(type=image):concept-input-apply">apply</a> to the element:
   <code id="image-button-state-(type=image):attr-input-alt-3"><a href=#attr-input-alt>alt</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formaction-2"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formenctype-2"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formmethod-2"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formnovalidate-2"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formtarget-2"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="image-button-state-(type=image):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="image-button-state-(type=image):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="image-button-state-(type=image):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="image-button-state-(type=image):attr-input-src-4"><a href=#attr-input-src>src</a></code>, and
   <code id="image-button-state-(type=image):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code> content attributes;
   <code id="image-button-state-(type=image):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute.</p>

   <p>The <code id="image-button-state-(type=image):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <span>default</span>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="image-button-state-(type=image):do-not-apply">do not apply</a> to the
   element:
   <code id="image-button-state-(type=image):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="image-button-state-(type=image):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="image-button-state-(type=image):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="image-button-state-(type=image):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="image-button-state-(type=image):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="image-button-state-(type=image):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="image-button-state-(type=image):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="image-button-state-(type=image):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="image-button-state-(type=image):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="image-button-state-(type=image):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="image-button-state-(type=image):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="image-button-state-(type=image):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="image-button-state-(type=image):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="image-button-state-(type=image):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="image-button-state-(type=image):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="image-button-state-(type=image):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="image-button-state-(type=image):attr-input-size"><a href=#attr-input-size>size</a></code>, and
   <code id="image-button-state-(type=image):attr-input-step"><a href=#attr-input-step>step</a></code>.</p>

   <p>The element's <code id="image-button-state-(type=image):attr-input-value"><a href=#attr-input-value>value</a></code> attribute must be omitted.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="image-button-state-(type=image):do-not-apply-2">do not apply</a> to the element:
   <code id="image-button-state-(type=image):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="image-button-state-(type=image):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="image-button-state-(type=image):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="image-button-state-(type=image):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="image-button-state-(type=image):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="image-button-state-(type=image):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="image-button-state-(type=image):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="image-button-state-(type=image):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="image-button-state-(type=image):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="image-button-state-(type=image):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="image-button-state-(type=image):do-not-apply-3">do not apply</a>.</p>

  </div>

  <p class=note>Many aspects of this state's behavior are similar to the behavior of the
  <code id="image-button-state-(type=image):the-img-element"><a href=embedded-content.html#the-img-element>img</a></code> element. Readers are encouraged to read that section, where many of the same
  requirements are described in more detail.</p>

  <div class=example>

   <p>Take the following form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;process.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>image</c-> <c- e>src</c-><c- o>=</c-><c- s>map.png</c-> <c- e>name</c-><c- o>=</c-><c- s>where</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Show location list&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>If the user clicked on the image at coordinate (127,40) then the URL used to submit the form
   would be "<code>process.cgi?where.x=127&amp;where.y=40</code>".</p>

   <p>(In this example, it's assumed that for users who don't see the map, and who instead just see
   a button labeled "Show location list", clicking the button will cause the server to show a list
   of locations to pick from instead of the map.)</p>

  </div>



  <h6 id="reset-button-state-(type=reset)"><span class=secno>4.10.5.1.20</span> <dfn data-dfn-for=input data-dfn-type=element-state>Reset Button</dfn> state (<code>type=reset</code>)<a href="#reset-button-state-(type=reset)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset title="<input> elements of type reset are rendered as buttons, with a default click event handler that resets all inputs in the form to their initial values.">Element/input/reset</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>
  
  The <code id="reset-button-state-(type=reset):the-input-element"><a href=#the-input-element>input</a></code> element <a id="reset-button-state-(type=reset):represents" href=dom.html#represents>represents</a> a button that, when activated, resets the
  form.  The element is
  a <a href=forms.html#concept-button id="reset-button-state-(type=reset):concept-button">button</a>.</p>

  <p class=note>Since the default label is <a id="reset-button-state-(type=reset):implementation-defined" href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>, and the width of
  the button typically depends on the button's label, the button's width can leak a few bits of
  fingerprintable information. These bits are likely to be strongly correlated to the identity of
  the user agent and the user's locale.</p>

  

  <div class=bookkeeping>

   <p>The <code id="reset-button-state-(type=reset):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute <a href=#concept-input-apply id="reset-button-state-(type=reset):concept-input-apply">applies</a> to this element and is in mode <span>default</span>.</p>

   <p>The following common <code id="reset-button-state-(type=reset):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes <a href=#concept-input-apply id="reset-button-state-(type=reset):concept-input-apply-2">apply</a> to the element:
   <code id="reset-button-state-(type=reset):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code> and
   <code id="reset-button-state-(type=reset):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="reset-button-state-(type=reset):do-not-apply">do not apply</a> to the
   element:
   <code id="reset-button-state-(type=reset):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="reset-button-state-(type=reset):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="reset-button-state-(type=reset):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="reset-button-state-(type=reset):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="reset-button-state-(type=reset):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="reset-button-state-(type=reset):do-not-apply-2">do not apply</a> to the element:
   <code id="reset-button-state-(type=reset):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="reset-button-state-(type=reset):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="reset-button-state-(type=reset):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="reset-button-state-(type=reset):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="reset-button-state-(type=reset):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="reset-button-state-(type=reset):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="reset-button-state-(type=reset):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="reset-button-state-(type=reset):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="reset-button-state-(type=reset):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="reset-button-state-(type=reset):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="reset-button-state-(type=reset):do-not-apply-3">do not apply</a>.</p>

  </div>


  <h6 id="button-state-(type=button)"><span class=secno>4.10.5.1.21</span> <dfn data-dfn-for=input data-dfn-type=element-state>Button</dfn> state (<code>type=button</code>)<a href="#button-state-(type=button)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button title="<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).">Element/input/button</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>The <code id="button-state-(type=button):the-input-element"><a href=#the-input-element>input</a></code> element <a id="button-state-(type=button):represents" href=dom.html#represents>represents</a> a button with no default behavior. A
  label for the button must be provided in the <code id="button-state-(type=button):attr-input-value"><a href=#attr-input-value>value</a></code>
  attribute, though it may be the empty string.  The element is a <a href=forms.html#concept-button id="button-state-(type=button):concept-button">button</a>.</p>

  

  <div class=bookkeeping>

   <p>The <code id="button-state-(type=button):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute <a href=#concept-input-apply id="button-state-(type=button):concept-input-apply">applies</a> to this element and is in mode <span>default</span>.</p>

   <p>The following common <code id="button-state-(type=button):the-input-element-2"><a href=#the-input-element>input</a></code> element content attributes <a href=#concept-input-apply id="button-state-(type=button):concept-input-apply-2">apply</a> to the element:
   <code id="button-state-(type=button):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code> and
   <code id="button-state-(type=button):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="button-state-(type=button):do-not-apply">do not apply</a> to the
   element:
   <code id="button-state-(type=button):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="button-state-(type=button):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="button-state-(type=button):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="button-state-(type=button):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="button-state-(type=button):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="button-state-(type=button):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="button-state-(type=button):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="button-state-(type=button):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="button-state-(type=button):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="button-state-(type=button):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="button-state-(type=button):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="button-state-(type=button):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="button-state-(type=button):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="button-state-(type=button):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="button-state-(type=button):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="button-state-(type=button):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="button-state-(type=button):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="button-state-(type=button):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="button-state-(type=button):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="button-state-(type=button):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="button-state-(type=button):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="button-state-(type=button):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="button-state-(type=button):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="button-state-(type=button):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="button-state-(type=button):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="button-state-(type=button):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="button-state-(type=button):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="button-state-(type=button):do-not-apply-2">do not apply</a> to the element:
   <code id="button-state-(type=button):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="button-state-(type=button):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="button-state-(type=button):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="button-state-(type=button):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="button-state-(type=button):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="button-state-(type=button):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="button-state-(type=button):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="button-state-(type=button):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="button-state-(type=button):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="button-state-(type=button):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="button-state-(type=button):do-not-apply-3">do not apply</a>.</p>

  </div>


  



  <h5 id=common-input-element-attributes><span class=secno>4.10.5.2</span> Common <code id=common-input-element-attributes:the-input-element><a href=#the-input-element>input</a></code> element attributes<a href=#common-input-element-attributes class=self-link></a></h5>

  


  <h6 id=the-maxlength-and-minlength-attributes><span class=secno>4.10.5.2.1</span> The <code id=the-maxlength-and-minlength-attributes:attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> and <code id=the-maxlength-and-minlength-attributes:attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> attributes<a href=#the-maxlength-and-minlength-attributes class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength title="The maxlength attribute defines the maximum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/maxlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength title="The minlength attribute defines the minimum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/minlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>51+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength title="The maxlength attribute defines the maximum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/maxlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength title="The minlength attribute defines the minimum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/minlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>51+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-maxlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>5+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>9+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>18+</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.5+</span></span><span class="opera_android yes"><span>Opera Android</span><span>15+</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=maxlength" title="maxlength attribute for input and textarea elements">caniuse.com table</a></span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-maxlength data-dfn-type=element-attr><code>maxlength</code></dfn>
  attribute is a
  <a href=form-control-infrastructure.html#attr-fe-maxlength id=the-maxlength-and-minlength-attributes:attr-fe-maxlength>form control <code>maxlength</code>
  attribute</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-minlength title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-minlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>51+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera yes"><span>Opera</span><span>27+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>51+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>10.3+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>40+</span></span><span class="webview_android yes"><span>WebView Android</span><span>40+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>4.0+</span></span><span class="opera_android yes"><span>Opera Android</span><span>27+</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=input-minlength" title="Minimum length attribute for input fields">caniuse.com table</a></span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-minlength data-dfn-type=element-attr><code>minlength</code></dfn>
  attribute is a
  <a href=form-control-infrastructure.html#attr-fe-minlength id=the-maxlength-and-minlength-attributes:attr-fe-minlength>form control <code>minlength</code>
  attribute</a>.</p>

  <p>If the <code id=the-maxlength-and-minlength-attributes:the-input-element><a href=#the-input-element>input</a></code> element has a <a id=the-maxlength-and-minlength-attributes:maximum-allowed-value-length href=form-control-infrastructure.html#maximum-allowed-value-length>maximum allowed value length</a>, then the
  <a id=the-maxlength-and-minlength-attributes:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the value of the element's <code id=the-maxlength-and-minlength-attributes:attr-input-value><a href=#attr-input-value>value</a></code>
  attribute must be less than or equal to the element's <a id=the-maxlength-and-minlength-attributes:maximum-allowed-value-length-2 href=form-control-infrastructure.html#maximum-allowed-value-length>maximum allowed value
  length</a>.</p>

  

  <div class=example>

   <p>The following extract shows how a messaging client's text entry could be arbitrarily
   restricted to a fixed number of characters, thus forcing any conversation through this medium to
   be terse and discouraging intelligent discourse.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->What are you doing? <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>status</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>140</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Here, a password is given a minimum length:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Username: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>u</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Password: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>p</c-> <c- e>required</c-> <c- e>minlength</c-><c- o>=</c-><c- s>12</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=the-size-attribute><span class=secno>4.10.5.2.2</span> The <code id=the-size-attribute:attr-input-size><a href=#attr-input-size>size</a></code> attribute<a href=#the-size-attribute class=self-link></a></h6>

  <p>The <dfn data-dfn-for=input id=attr-input-size data-dfn-type=element-attr><code>size</code></dfn> attribute
  gives the number of characters that, in a visual rendering, the user agent is to allow the user to
  see while editing the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-size-attribute:concept-fe-value>value</a>.</p>

  <p>The <code id=the-size-attribute:attr-input-size-2><a href=#attr-input-size>size</a></code> attribute, if specified, must have a value that
  is a <a id=the-size-attribute:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a> greater than zero.</p>

  



  <h6 id=the-readonly-attribute><span class=secno>4.10.5.2.3</span> The <code id=the-readonly-attribute:attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute<a href=#the-readonly-attribute class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly title="The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.">Attributes/readonly</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly title="The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.">Attributes/readonly</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly title="The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.">Attributes/readonly</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>≤4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>≤6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div>

  <p>The <dfn data-dfn-for=input id=attr-input-readonly data-dfn-type=element-attr><code>readonly</code></dfn>
  attribute is a <a id=the-readonly-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that controls whether or not the user can edit the
  form control. </p>

  

  <div class=note>
   <p>The difference between <code id=the-readonly-attribute:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> and <code id=the-readonly-attribute:attr-input-readonly-2><a href=#attr-input-readonly>readonly</a></code> is that read-only controls can still function,
   whereas disabled controls generally do not function as controls until they are enabled. This is
   spelled out in more detail elsewhere in this specification with normative requirements that refer
   to the <a href=form-control-infrastructure.html#concept-fe-disabled id=the-readonly-attribute:concept-fe-disabled>disabled</a> concept (for example, the element's
   <a id=the-readonly-attribute:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a>, whether or not it is a <a id=the-readonly-attribute:focusable-area href=interaction.html#focusable-area>focusable area</a>, or when
   <span>constructing the entry list</span>). Any other behavior related to user interaction with
   disabled controls, such as whether text can be selected or copied, is not defined in this
   standard.</p>

   <p>Only text controls can be made read-only, since for other controls (such as checkboxes and
   buttons) there is no useful distinction between being read-only and being disabled, so the
   <code id=the-readonly-attribute:attr-input-readonly-3><a href=#attr-input-readonly>readonly</a></code> attribute <a href=#do-not-apply id=the-readonly-attribute:do-not-apply>does not
   apply</a>.</p>
  </div>

  <div class=example>

   <p>In the following example, the existing product identifiers cannot be modified, but they are
   still displayed as part of the form, for consistency with the row representing a new product
   (where the identifier is not yet filled in).</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;products.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c-> <c- e>enctype</c-><c- o>=</c-><c- s>&quot;multipart/form-data&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Product ID <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Product name <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Price <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Action
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>readonly</c-><c- o>=</c-><c- s>&quot;readonly&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;1.pid&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;H412&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;1.pname&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Floor lamp Ulke&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $<c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;0.01&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;1.pprice&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;49.99&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>formnovalidate</c-><c- o>=</c-><c- s>&quot;formnovalidate&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;delete:1&quot;</c-><c- p>&gt;</c->Delete<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>readonly</c-><c- o>=</c-><c- s>&quot;readonly&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;2.pid&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;FG28&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;2.pname&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Table lamp Ulke&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $<c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;0.01&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;2.pprice&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;24.99&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>formnovalidate</c-><c- o>=</c-><c- s>&quot;formnovalidate&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;delete:2&quot;</c-><c- p>&gt;</c->Delete<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;3.pid&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[A-Z0-9]+&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;3.pname&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $<c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;0.01&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;3.pprice&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>formnovalidate</c-><c- o>=</c-><c- s>&quot;formnovalidate&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;delete:3&quot;</c-><c- p>&gt;</c->Delete<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>formnovalidate</c-><c- o>=</c-><c- s>&quot;formnovalidate&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;add&quot;</c-><c- p>&gt;</c->Add<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;update&quot;</c-><c- p>&gt;</c->Save<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=the-required-attribute><span class=secno>4.10.5.2.4</span> The <code id=the-required-attribute:attr-input-required><a href=#attr-input-required>required</a></code> attribute<a href=#the-required-attribute class=self-link></a></h6>

  <p>The <dfn data-dfn-for=input id=attr-input-required data-dfn-type=element-attr><code>required</code></dfn>
  attribute is a <a id=the-required-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. When specified, the element is <dfn id=concept-input-required><i>required</i></dfn>.</p>

  

  <div class=example>

   <p>The following form has two required fields, one for an email address and one for a password.
   It also has a third field that is only considered valid if the user types the same password in
   the password field and this third field.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Create new account<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/newaccount&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c->
      <c- e>oninput</c-><c- o>=</c-><c- s>&quot;up2.setCustomValidity(up2.value != up.value ? &apos;Passwords do not match.&apos; : &apos;&apos;)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;username&quot;</c-><c- p>&gt;</c->Email address:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;username&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>un</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;password1&quot;</c-><c- p>&gt;</c->Password:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;password1&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>password</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>up</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;password2&quot;</c-><c- p>&gt;</c->Confirm password:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;password2&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>password</c-> <c- e>name</c-><c- o>=</c-><c- s>up2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Create account&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>For radio buttons, the <code id=the-required-attribute:attr-input-required-2><a href=#attr-input-required>required</a></code> attribute is
   satisfied if any of the radio buttons in the <a href=#radio-button-group id=the-required-attribute:radio-button-group>group</a> is
   selected. Thus, in the following example, any of the radio buttons can be checked, not just the
   one marked as required:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Did the movie pass the Bechdel test?<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;no-characters&quot;</c-><c- p>&gt;</c-> No, there are not even two female characters in the movie. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;no-names&quot;</c-><c- p>&gt;</c-> No, the female characters never talk to each other. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;no-topic&quot;</c-><c- p>&gt;</c-> No, when female characters talk to each other it&apos;s always about a male character. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;yes&quot;</c-> <strong><c- e>required</c-></strong><c- p>&gt;</c-> Yes. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;unknown&quot;</c-><c- p>&gt;</c-> I don&apos;t know. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

   <p>To avoid confusion as to whether a <a href=#radio-button-group id=the-required-attribute:radio-button-group-2>radio button group</a> is required or not, authors
   are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general,
   authors are encouraged to avoid having radio button groups that do not have any initially checked
   controls in the first place, as this is a state that the user cannot return to, and is therefore
   generally considered a poor user interface.</p>

  </div>


  <h6 id=the-multiple-attribute><span class=secno>4.10.5.2.5</span> The <code id=the-multiple-attribute:attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute<a href=#the-multiple-attribute class=self-link></a></h6>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple title="The Boolean multiple attribute, if set, means the form control accepts one or more values. Valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control.">Attributes/multiple</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-multiple</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>≤37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-multiple data-dfn-type=element-attr><code>multiple</code></dfn>
  attribute is a <a id=the-multiple-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that indicates whether the user is to be allowed to
  specify more than one value.</p>

  <div class=example>

   <p>The following extract shows how an email client's "To" field could accept multiple email
   addresses.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->To: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>multiple</c-> <c- e>name</c-><c- o>=</c-><c- s>to</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

   <p>If the user had, amongst many friends in their user contacts database, two friends
   "Spider-Man" (with address "spider@parker.example.net") and "Scarlet Witch" (with address
   "scarlet@avengers.example.net"), then, after the user has typed "<kbd>s</kbd>", the user agent
   might suggest these two email addresses to the user.</p>

   
   <p><img class=darkmode-aware width=330 alt="" src=../images/sample-email-1.svg height=100></p>

   <p>The page could also link in the user's contacts database from the site:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->To: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>multiple</c-> <c- e>name</c-><c- o>=</c-><c- s>to</c-> <c- e>list</c-><c- o>=</c-><c- s>contacts</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
...
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;contacts&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;hedral@damowmow.com&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;pillar@example.com&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;astrophy@cute.example&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;astronomy@science.example.org&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>Suppose the user had entered "<kbd>bob@example.net</kbd>" into this text control, and then
   started typing a second email address starting with "<kbd>s</kbd>". The user agent might show
   both the two friends mentioned earlier, as well as the "astrophy" and "astronomy" values given in
   the <code id=the-multiple-attribute:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code> element.</p>

   
   <p><img class=darkmode-aware width=330 alt="" src=../images/sample-email-2.svg height=140></p>

  </div>

  <div class=example>

   <p>The following extract shows how an email client's "Attachments" field could accept multiple
   files for upload.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Attachments: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>file</c-> <c- e>multiple</c-> <c- e>name</c-><c- o>=</c-><c- s>att</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=the-pattern-attribute><span class=secno>4.10.5.2.6</span> The <code id=the-pattern-attribute:attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute<a href=#the-pattern-attribute class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern title="The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.">Attributes/pattern</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>≤37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern title="The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.">Attributes/pattern</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-pattern data-dfn-type=element-attr><code>pattern</code></dfn>
  attribute specifies a regular expression against which the control's <a href=form-control-infrastructure.html#concept-fe-value id=the-pattern-attribute:concept-fe-value>value</a>, or, when the <code id=the-pattern-attribute:attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute <a href=#concept-input-apply id=the-pattern-attribute:concept-input-apply>applies</a> and is set, the control's <a href=form-control-infrastructure.html#concept-fe-values id=the-pattern-attribute:concept-fe-values>values</a>, are to be checked.</p>

  <p>If specified, the attribute's value must match the JavaScript <i id=the-pattern-attribute:js-prod-pattern><a data-x-internal=js-prod-pattern href=https://tc39.es/ecma262/#prod-Pattern>Pattern</a></i><sub><code>[+UnicodeSetsMode, +N]</code></sub> production.</p>

  

  <p>When an <code id=the-pattern-attribute:the-input-element><a href=#the-input-element>input</a></code> element has a <code id=the-pattern-attribute:attr-input-pattern-2><a href=#attr-input-pattern>pattern</a></code>
  attribute specified, authors should include a <dfn data-dfn-for=input id=attr-input-title data-dfn-type=element-attr><code>title</code></dfn> attribute to give a description of the pattern.  User
  agents may use the contents of this attribute, if it is present, when informing the user that the
  pattern is not matched, or at any other suitable time, such as in a tooltip or read out by
  assistive technology when the control <a id=the-pattern-attribute:gains-focus href=interaction.html#gains-focus>gains focus</a>.</p>

  <div class=example>
   <p>For example, the following snippet:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Part number:
 <c- p>&lt;</c-><c- f>input</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[0-9][A-Z]{3}&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;part&quot;</c->
        <c- e>title</c-><c- o>=</c-><c- s>&quot;A part number is a digit followed by three uppercase letters.&quot;</c-><c- p>/&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>
   <p>...could cause the UA to display an alert such as:</p>
   <pre><samp>A part number is a digit followed by three uppercase letters.
You cannot submit this form when the field is incorrect.</samp></pre>
  </div>

  <p>When a control has a <code id=the-pattern-attribute:attr-input-pattern-3><a href=#attr-input-pattern>pattern</a></code> attribute, the <code id=the-pattern-attribute:attr-input-title><a href=#attr-input-title>title</a></code> attribute, if used, must describe the pattern. Additional
  information could also be included, so long as it assists the user in filling in the control.
  Otherwise, assistive technology would be impaired.</p>

  <p class=example>For instance, if the title attribute contained the caption of the control,
  assistive technology could end up saying something like <samp>The text you have entered does not
  match the required pattern. Birthday</samp>, which is not useful.</p>

  <p>UAs may still show the <code id=the-pattern-attribute:attr-title><a href=dom.html#attr-title>title</a></code> in non-error situations (for
  example, as a tooltip when hovering over the control), so authors should be careful not to word
  <code id=the-pattern-attribute:attr-input-title-2><a href=#attr-input-title>title</a></code>s as if an error has necessarily occurred.</p>


  <h6 id=the-min-and-max-attributes><span class=secno>4.10.5.2.7</span> The <code id=the-min-and-max-attributes:attr-input-min><a href=#attr-input-min>min</a></code> and <code id=the-min-and-max-attributes:attr-input-max><a href=#attr-input-max>max</a></code> attributes<a href=#the-min-and-max-attributes class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max title="The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.">Attributes/max</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min title="The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.">Attributes/min</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  

  <p>Some form controls can have explicit constraints applied limiting the allowed range of values
  that the user can provide. Normally, such a range would be linear and continuous. A form control
  can <dfn id=has-a-periodic-domain>have a periodic domain</dfn>, however, in which case the
  form control's broadest possible range is finite, and authors can specify explicit ranges within
  it that span the boundaries.</p>

  <p class=example>Specifically, the broadest range of a <code id="the-min-and-max-attributes:time-state-(type=time)"><a href="#time-state-(type=time)">type=time</a></code> control is midnight to midnight (24 hours), and
  authors can set both continuous linear ranges (such as 9pm to 11pm) and discontinuous ranges
  spanning midnight (such as 11pm to 1am).</p>

  <p>The <dfn data-dfn-for=input id=attr-input-min data-dfn-type=element-attr><code>min</code></dfn> and <dfn data-dfn-for=input id=attr-input-max data-dfn-type=element-attr><code>max</code></dfn> attributes indicate the
  allowed range of values for the element.</p>

  

  <p>If the element does not <a href=#has-a-periodic-domain id=the-min-and-max-attributes:has-a-periodic-domain>have a periodic domain</a>, the
  <code id=the-min-and-max-attributes:attr-input-max-2><a href=#attr-input-max>max</a></code> attribute's value (the <span>maximum</span>) must not be less than the <code id=the-min-and-max-attributes:attr-input-min-2><a href=#attr-input-min>min</a></code> attribute's value (its <span>minimum</span>).</p>

  

  <p>An element <dfn id=have-range-limitations>has range limitations</dfn> if it has a defined
  <span>minimum</span> or a defined <span>maximum</span>.</p>

  

  <div class=example>

   <p>The following date control limits input to dates that are before the 1980s:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>bday</c-> <c- e>type</c-><c- o>=</c-><c- s>date</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;1979-12-31&quot;</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following number control limits input to whole numbers greater than zero:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>quantity</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;1&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following time control limits input to those minutes that occur between 9pm and 6am,
   defaulting to midnight:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;sleepStart&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;06:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;60&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;00:00&quot;</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=the-step-attribute><span class=secno>4.10.5.2.8</span> The <code id=the-step-attribute:attr-input-step><a href=#attr-input-step>step</a></code> attribute<a href=#the-step-attribute class=self-link></a></h6>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step title="The step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. It is valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types.">Attributes/step</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-step data-dfn-type=element-attr><code>step</code></dfn> attribute
  indicates the granularity that is expected (and required) of the <a href=form-control-infrastructure.html#concept-fe-value id=the-step-attribute:concept-fe-value>value</a> or <a href=form-control-infrastructure.html#concept-fe-values id=the-step-attribute:concept-fe-values>values</a>, by
  limiting the allowed values. </p>

  <p>The <code id=the-step-attribute:attr-input-step-2><a href=#attr-input-step>step</a></code> attribute, if specified, must either have a
  value that is a <a id=the-step-attribute:valid-floating-point-number href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a> that <span>parses</span> to a number that is greater than zero, or must have a
  value that is an <a id=the-step-attribute:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>any</code>".</p>

  

  <div class=example>

   <p>The following range control only accepts values in the range 0..1, and allows 256 steps in
   that range:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>opacity</c-> <c- e>type</c-><c- o>=</c-><c- s>range</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>1</c-> <c- e>step</c-><c- o>=</c-><c- s>0.00392156863</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following control allows any time in the day to be selected, with any accuracy (e.g.
   thousandth-of-a-second accuracy or more):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>favtime</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>step</c-><c- o>=</c-><c- s>any</c-><c- p>&gt;</c-></code></pre>

   <p>Normally, time controls are limited to an accuracy of one minute.</p>

  </div>



  <h6 id=the-list-attribute><span class=secno>4.10.5.2.9</span> The <code id=the-list-attribute:attr-input-list><a href=#attr-input-list>list</a></code> attribute<a href=#the-list-attribute class=self-link></a></h6>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#list</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>12.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4.3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-list data-dfn-type=element-attr><code>list</code></dfn> attribute is
  used to identify an element that lists predefined options suggested to the user.</p>

  <p>If present, its value must be the <a href=https://dom.spec.whatwg.org/#concept-id id=the-list-attribute:concept-id data-x-internal=concept-id>ID</a> of a <code id=the-list-attribute:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code>
  element in the same <a id=the-list-attribute:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.</p>

  

  <div class=example>

   <p>This URL field offers some suggestions.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Homepage: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>hp</c-> <c- e>type</c-><c- o>=</c-><c- s>url</c-> <c- e>list</c-><c- o>=</c-><c- s>hpurls</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>hpurls</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://www.google.com/&quot;</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Google&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://www.reddit.com/&quot;</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Reddit&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>Other URLs from the user's history might show also; this is up to the user agent.</p>

  </div>

  <div class=example>

   <p>This example demonstrates how to design a form that uses the autocompletion list feature while
   still degrading usefully in legacy user agents.</p>

   <p>If the autocompletion list is merely an aid, and is not important to the content, then simply
   using a <code id=the-list-attribute:the-datalist-element-2><a href=form-elements.html#the-datalist-element>datalist</a></code> element with children <code id=the-list-attribute:the-option-element><a href=form-elements.html#the-option-element>option</a></code> elements is enough. To
   prevent the values from being rendered in legacy user agents, they need to be placed inside the
   <code id=the-list-attribute:attr-option-value><a href=form-elements.html#attr-option-value>value</a></code> attribute instead of inline.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  Enter a breed:
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;breed&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;breeds&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;breeds&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Abyssinian&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Alpaca&quot;</c-><c- p>&gt;</c->
   <c- c>&lt;!-- ... --&gt;</c->
  <c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>However, if the values need to be shown in legacy UAs, then fallback content can be placed
   inside the <code id=the-list-attribute:the-datalist-element-3><a href=form-elements.html#the-datalist-element>datalist</a></code> element, as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  Enter a breed:
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;breed&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;breeds&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;breeds&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
   or select one from the list:
   <c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;breed&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-> (none selected)
    <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Abyssinian
    <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Alpaca
    <c- c>&lt;!-- ... --&gt;</c->
   <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>The fallback content will only be shown in UAs that don't support <code id=the-list-attribute:the-datalist-element-4><a href=form-elements.html#the-datalist-element>datalist</a></code>. The
   options, on the other hand, will be detected by all UAs, even though they are not children of the
   <code id=the-list-attribute:the-datalist-element-5><a href=form-elements.html#the-datalist-element>datalist</a></code> element.</p>

   <p>Note that if an <code id=the-list-attribute:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> element used in a <code id=the-list-attribute:the-datalist-element-6><a href=form-elements.html#the-datalist-element>datalist</a></code> is <code id=the-list-attribute:attr-option-selected><a href=form-elements.html#attr-option-selected>selected</a></code>, it will be selected by default by legacy UAs
   (because it affects the <code id=the-list-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element), but it will not have any effect on the
   <code id=the-list-attribute:the-input-element><a href=#the-input-element>input</a></code> element in UAs that support <code id=the-list-attribute:the-datalist-element-7><a href=form-elements.html#the-datalist-element>datalist</a></code>.</p>

  </div>



  <h6 id=the-placeholder-attribute><span class=secno>4.10.5.2.10</span> The <code id=the-placeholder-attribute:attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute<a href=#the-placeholder-attribute class=self-link></a></h6>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#placeholder</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-placeholder</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>≤37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-placeholder data-dfn-type=element-attr><code>placeholder</code></dfn> attribute represents a <em>short</em>
  hint (a word or short phrase) intended to aid the user with data entry when the control has no
  value. A hint could be a sample value or a brief description of the expected format. The
  attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D
  CARRIAGE RETURN (CR) characters.</p>

  <p>The <code id=the-placeholder-attribute:attr-input-placeholder-2><a href=#attr-input-placeholder>placeholder</a></code> attribute should not be used as an
  alternative to a <code id=the-placeholder-attribute:the-label-element><a href=forms.html#the-label-element>label</a></code>. For a longer hint or other advisory text, the <code id=the-placeholder-attribute:attr-title><a href=dom.html#attr-title>title</a></code> attribute is more appropriate.</p>

  <p class=note>These mechanisms are very similar but subtly different: the hint given by the
  control's <code id=the-placeholder-attribute:the-label-element-2><a href=forms.html#the-label-element>label</a></code> is shown at all times; the short hint given in the <code id=the-placeholder-attribute:attr-input-placeholder-3><a href=#attr-input-placeholder>placeholder</a></code> attribute is shown before the user enters a
  value; and the hint in the <code id=the-placeholder-attribute:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute is shown when the user
  requests further help.</p>

  

  <div class=example>

   <p>Here is an example of a mail configuration user interface that uses the <code id=the-placeholder-attribute:attr-input-placeholder-4><a href=#attr-input-placeholder>placeholder</a></code> attribute:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Mail Account<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;fullname&quot;</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;John Ratzenberger&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;email&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;address&quot;</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;john@example.net&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Password: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;password&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;password&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Description: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;desc&quot;</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;My Email Account&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In situations where the control's content has one directionality but the placeholder needs to
   have a different directionality, Unicode's bidirectional-algorithm formatting characters can be
   used in the attribute value:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>t1</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;</c-><strong><c- s>&amp;#x202B;</c-></strong><c- s> </c-><bdo dir='rtl'><c- s>رقم الهاتف 1</c-></bdo><c- s> </c-><strong><c- s>&amp;#x202E;</c-></strong><c- s>&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>t2</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;</c-><strong><c- s>&amp;#x202B;</c-></strong><c- s> </c-><bdo dir='rtl'><c- s>رقم الهاتف 2</c-></bdo><c- s> </c-><strong><c- s>&amp;#x202E;</c-></strong><c- s>&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>For slightly more clarity, here's the same example using numeric character references instead of inline Arabic:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>t1</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;</c-><strong><c- s>&amp;#x202B;</c-></strong><c- s>&amp;#1585;&amp;#1602;&amp;#1605; &amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601; 1</c-><strong><c- s>&amp;#x202E;</c-></strong><c- s>&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>t2</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;</c-><strong><c- s>&amp;#x202B;</c-></strong><c- s>&amp;#1585;&amp;#1602;&amp;#1605; &amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601; 2</c-><strong><c- s>&amp;#x202E;</c-></strong><c- s>&quot;</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h5 id=common-input-element-apis><span class=secno>4.10.5.3</span> Common <code id=common-input-element-apis:the-input-element><a href=#the-input-element>input</a></code> element APIs<a href=#common-input-element-apis class=self-link></a></h5>

  <dl class=domintro><dt><code><var>input</var>.<span id=dom-input-value>value</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the current <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value>value</a> of the form control.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <a id=common-input-element-apis:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if it is
    set to any value other than the empty string when the control is a file upload control.</p>
   <dt><code><var>input</var>.<span id=dom-input-checked>checked</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the current <a href=form-control-infrastructure.html#concept-fe-checked id=common-input-element-apis:concept-fe-checked>checkedness</a> of the form
    control.</p>

    <p>Can be set, to change the <a href=form-control-infrastructure.html#concept-fe-checked id=common-input-element-apis:concept-fe-checked-2>checkedness</a>.</p>
   <dt><code><var>input</var>.<span id=dom-input-files>files</span> [ = <var>files</var> ]</code><dd>
    <p>Returns a <code id=common-input-element-apis:filelist><a data-x-internal=filelist href=https://w3c.github.io/FileAPI/#filelist-section>FileList</a></code> object listing the <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected>selected files</a> of the form control.</p>

    <p>Returns null if the control isn't a file control.</p>

    <p>Can be set to a <code id=common-input-element-apis:filelist-2><a data-x-internal=filelist href=https://w3c.github.io/FileAPI/#filelist-section>FileList</a></code> object to change the <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-2>selected files</a> of the form control. For
    instance, as the result of a drag-and-drop operation.</p>
   <dt><code><var>input</var>.<span id=dom-input-valueasdate>valueAsDate</span> [ = <var>value</var> ]</code><dd>
    <p>Returns a <code id=common-input-element-apis:date><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object representing the form control's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-2>value</a>, if applicable; otherwise, returns null.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <a id=common-input-element-apis:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    control isn't date- or time-based.</p>
   <dt><code><var>input</var>.<span id=dom-input-valueasnumber>valueAsNumber</span> [ = <var>value</var> ]</code><dd>
    <p>Returns a number representing the form control's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-3>value</a>, if applicable; otherwise, returns NaN.</p>

    <p>Can be set, to change the value. Setting this to NaN will set the underlying value to the
    empty string.</p>

    <p>Throws an <a id=common-input-element-apis:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    control is neither date- or time-based nor numeric.</p>
   <dt><code><var>input</var>.<span id=dom-input-stepup>stepUp</span>([ <var>n</var> ])</code><dt><code><var>input</var>.<span id=dom-input-stepdown>stepDown</span>([ <var>n</var> ])</code><dd>
    <p>Changes the form control's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-4>value</a> by the value given in
    the <code id=common-input-element-apis:attr-input-step><a href=#attr-input-step>step</a></code> attribute, multiplied by <var>n</var>. The
    default value for <var>n</var> is 1.</p>

    <p>Throws <a id=common-input-element-apis:invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the control
    is neither date- or time-based nor numeric, or if the <code id=common-input-element-apis:attr-input-step-2><a href=#attr-input-step>step</a></code>
    attribute's value is "<code>any</code>".</p>
   <dt><code><var>input</var>.<span id=dom-input-list>list</span></code><dd><p>Returns the <code id=common-input-element-apis:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code> element indicated by the <code id=common-input-element-apis:attr-input-list><a href=#attr-input-list>list</a></code> attribute.<dt><code><var>input</var>.<span id=dom-input-showpicker>showPicker</span>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker title="The HTMLInputElement.showPicker() method displays the browser picker for an input element.">HTMLInputElement/showPicker</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>101+</span></span><span class="safari yes"><span>Safari</span><span>16+</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Shows any applicable picker UI for <var>input</var>, so that the user can select a value.</p>

    <p>If <var>input</var> does not <span>support a picker</span>,
    this method does nothing.</p>

    <p>Throws an <a id=common-input-element-apis:invalidstateerror-5 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>input</var> is not <a href=form-control-infrastructure.html#concept-fe-mutable id=common-input-element-apis:concept-fe-mutable>mutable</a>.</p>

    <p>Throws a <a id=common-input-element-apis:notallowederror href=https://webidl.spec.whatwg.org/#notallowederror data-x-internal=notallowederror>"<code>NotAllowedError</code>"</a> <code id=common-input-element-apis:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if called
    without <span>transient user activation</span>.</p>

    <p>Throws a <a id=common-input-element-apis:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=common-input-element-apis:domexception-7><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>input</var> is inside a cross-origin <code id=common-input-element-apis:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>, unless <var>input</var> is in the
    <a href="#file-upload-state-(type=file)" id="common-input-element-apis:file-upload-state-(type=file)">File Upload</a> or <a href="#color-state-(type=color)" id="common-input-element-apis:color-state-(type=color)">Color</a> states.</p>
  </dl>

  


  



  <nav><a href=forms.html>← 4.10 Forms</a> — <a href=index.html>Table of Contents</a> — <a href=form-elements.html>4.10.6 The button element →</a></nav>
